From 9e20f1b0a68e6e215cb49230707cb64f9d086b1d Mon Sep 17 00:00:00 2001 From: Le Tan Date: Tue, 12 Jan 2021 20:34:45 +0800 Subject: [PATCH] support section number base level [1,3] in read mode --- src/core/configmgr.cpp | 2 +- src/core/htmltemplatehelper.cpp | 4 +- src/core/htmltemplatehelper.h | 2 + src/core/mainconfig.cpp | 1 - src/data/core/vnotex.json | 2 +- src/data/extra/themes/moonlight/highlight.css | 187 ++++++++-------- src/data/extra/themes/native/highlight.css | 209 +++++++++--------- src/data/extra/themes/pure/highlight.css | 203 ++++++++--------- src/data/extra/web/css/globalstyles.css | 86 +++++-- src/data/extra/web/js/vnotex.js | 11 + .../dialogs/settings/markdowneditorpage.cpp | 2 +- 11 files changed, 386 insertions(+), 323 deletions(-) diff --git a/src/core/configmgr.cpp b/src/core/configmgr.cpp index 1fcad027..f042c3e1 100644 --- a/src/core/configmgr.cpp +++ b/src/core/configmgr.cpp @@ -24,7 +24,7 @@ using namespace vnotex; #ifndef QT_NO_DEBUG -// #define VX_DEBUG_WEB +#define VX_DEBUG_WEB #endif const QString ConfigMgr::c_orgName = "VNote"; diff --git a/src/core/htmltemplatehelper.cpp b/src/core/htmltemplatehelper.cpp index f1edc831..7bb8d381 100644 --- a/src/core/htmltemplatehelper.cpp +++ b/src/core/htmltemplatehelper.cpp @@ -25,7 +25,8 @@ QString WebGlobalOptions::toJavascriptObject() const + QString("autoBreakEnabled: %1,\n").arg(Utils::boolToString(m_autoBreakEnabled)) + QString("linkifyEnabled: %1,\n").arg(Utils::boolToString(m_linkifyEnabled)) + QString("indentFirstLineEnabled: %1,\n").arg(Utils::boolToString(m_indentFirstLineEnabled)) - + QString("sectionNumberEnabled: %1\n").arg(Utils::boolToString(m_sectionNumberEnabled)) + + QString("sectionNumberEnabled: %1,\n").arg(Utils::boolToString(m_sectionNumberEnabled)) + + QString("sectionNumberBaseLevel: %1\n").arg(m_sectionNumberBaseLevel) + QStringLiteral("}"); } @@ -157,6 +158,7 @@ void HtmlTemplateHelper::updateMarkdownViewerTemplate(const MarkdownEditorConfig opts.m_webPlantUml = p_config.getWebPlantUml(); opts.m_webGraphviz = p_config.getWebGraphviz(); opts.m_sectionNumberEnabled = p_config.getSectionNumberMode() == MarkdownEditorConfig::SectionNumberMode::Read; + opts.m_sectionNumberBaseLevel = p_config.getSectionNumberBaseLevel(); opts.m_constrainImageWidthEnabled = p_config.getConstrainImageWidthEnabled(); opts.m_protectFromXss = p_config.getProtectFromXss(); opts.m_htmlTagEnabled = p_config.getHtmlTagEnabled(); diff --git a/src/core/htmltemplatehelper.h b/src/core/htmltemplatehelper.h index a421edbc..22a515b9 100644 --- a/src/core/htmltemplatehelper.h +++ b/src/core/htmltemplatehelper.h @@ -16,6 +16,8 @@ namespace vnotex bool m_sectionNumberEnabled = true; + int m_sectionNumberBaseLevel = 2; + bool m_constrainImageWidthEnabled = true; bool m_protectFromXss = false; diff --git a/src/core/mainconfig.cpp b/src/core/mainconfig.cpp index 551f8078..3bfcabc3 100644 --- a/src/core/mainconfig.cpp +++ b/src/core/mainconfig.cpp @@ -117,5 +117,4 @@ QString MainConfig::getVersion(const QJsonObject &p_jobj) void MainConfig::doVersionSpecificOverride() { // In a new version, we may want to change one value by force. - m_coreConfig->setTheme(QStringLiteral("pure")); } diff --git a/src/data/core/vnotex.json b/src/data/core/vnotex.json index b9a8648c..182be339 100644 --- a/src/data/core/vnotex.json +++ b/src/data/core/vnotex.json @@ -229,7 +229,7 @@ "insert_file_name_as_title" : true, "//comment" : "none/read/edit", "section_number" : "read", - "//comment" : "Base level to start section numbering, valid only in edit mode", + "//comment" : "Base level to start section numbering", "section_number_base_level" : 2, "//comment" : "Style of the section number in edit mode", "//comment" : "digdotdigdot/digdotdig", diff --git a/src/data/extra/themes/moonlight/highlight.css b/src/data/extra/themes/moonlight/highlight.css index 2ce2f611..f06ec2b8 100644 --- a/src/data/extra/themes/moonlight/highlight.css +++ b/src/data/extra/themes/moonlight/highlight.css @@ -8,45 +8,45 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli code[class*="language-"], pre[class*="language-"] { - color: #ccc; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; + color: #ccc; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } /* Code blocks */ pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; + padding: 1em; + margin: .5em 0; + overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #2d323b; + background: #2d323b; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; + padding: .1em; + border-radius: .3em; + white-space: normal; } .token.comment, @@ -54,35 +54,35 @@ pre[class*="language-"] { .token.prolog, .token.doctype, .token.cdata { - color: #999; + color: #999; } .token.punctuation { - color: #ccc; + color: #ccc; } .token.tag, .token.attr-name, .token.namespace, .token.deleted { - color: #e2777a; + color: #e2777a; } .token.function-name { - color: #6196cc; + color: #6196cc; } .token.boolean, .token.number, .token.function { - color: #f08d49; + color: #f08d49; } .token.property, .token.class-name, .token.constant, .token.symbol { - color: #f8c555; + color: #f8c555; } .token.selector, @@ -90,7 +90,7 @@ pre[class*="language-"] { .token.atrule, .token.keyword, .token.builtin { - color: #cc99cd; + color: #cc99cd; } .token.string, @@ -98,124 +98,124 @@ pre[class*="language-"] { .token.attr-value, .token.regex, .token.variable { - color: #7ec699; + color: #7ec699; } .token.operator, .token.entity, .token.url { - color: #67cdcc; + color: #67cdcc; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } .token.inserted { - color: green; + color: green; } pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; + position: relative; + white-space: inherit; } .line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .line-numbers-rows > span { - display: block; - counter-increment: linenumber; - } + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } div.code-toolbar { - position: relative; + position: relative; } div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } div.code-toolbar:hover > .toolbar { - opacity: 1; + opacity: 1; } /* Separate line b/c rules are thrown out if selector is invalid. IE11 and old Edge versions don't support :focus-within. */ div.code-toolbar:focus-within > .toolbar { - opacity: 1; + opacity: 1; } div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; + display: inline-block; } div.code-toolbar > .toolbar a { - cursor: pointer; + cursor: pointer; } div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; } div.code-toolbar > .toolbar a:hover, @@ -224,7 +224,6 @@ div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } - diff --git a/src/data/extra/themes/native/highlight.css b/src/data/extra/themes/native/highlight.css index a6dd3c32..78433a67 100644 --- a/src/data/extra/themes/native/highlight.css +++ b/src/data/extra/themes/native/highlight.css @@ -8,79 +8,81 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc code[class*="language-"], pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background-color: #1976D2; + color: white; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background-color: #1976D2; + color: white; } @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } } /* Code blocks */ pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; + padding: 1em; + margin: .5em 0; + overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; + background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; + padding: .1em; + border-radius: .3em; + white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: slategray; } .token.punctuation { - color: #999; + color: #999; } .token.namespace { - opacity: .7; + opacity: .7; } .token.property, @@ -90,7 +92,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: #905; } .token.selector, @@ -99,7 +101,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #690; + color: #690; } .token.operator, @@ -107,133 +109,133 @@ pre[class*="language-"] { .token.url, .language-css .token.string, .style .token.string { - color: #9a6e3a; - /* This background color was intended by the author of this theme. */ - background: hsla(0, 0%, 100%, .5); + color: #9a6e3a; + /* This background color was intended by the author of this theme. */ + background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #07a; } .token.function, .token.class-name { - color: #DD4A68; + color: #DD4A68; } .token.regex, .token.important, .token.variable { - color: #e90; + color: #e90; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; + position: relative; + white-space: inherit; } .line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .line-numbers-rows > span { - display: block; - counter-increment: linenumber; - } + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } div.code-toolbar { - position: relative; + position: relative; } div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } div.code-toolbar:hover > .toolbar { - opacity: 1; + opacity: 1; } /* Separate line b/c rules are thrown out if selector is invalid. IE11 and old Edge versions don't support :focus-within. */ div.code-toolbar:focus-within > .toolbar { - opacity: 1; + opacity: 1; } div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; + display: inline-block; } div.code-toolbar > .toolbar a { - cursor: pointer; + cursor: pointer; } div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; } div.code-toolbar > .toolbar a:hover, @@ -242,7 +244,6 @@ div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } - diff --git a/src/data/extra/themes/pure/highlight.css b/src/data/extra/themes/pure/highlight.css index 8030a50b..dd00c564 100644 --- a/src/data/extra/themes/pure/highlight.css +++ b/src/data/extra/themes/pure/highlight.css @@ -8,78 +8,80 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc code[class*="language-"], pre[class*="language-"] { - color: black; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; + color: black; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background-color: #1976d2; + color: #f1f1f1; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background-color: #1976d2; + color: #f1f1f1; } @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } } /* Code blocks */ pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; + padding: 1em; + margin: .5em 0; + overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #ede8e4; + background: #ede8e4; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; + padding: .1em; + border-radius: .3em; + white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: slategray; } .token.punctuation { - color: #999; + color: #999; } .token.namespace { - opacity: .7; + opacity: .7; } .token.property, @@ -89,7 +91,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: #905; } .token.selector, @@ -98,7 +100,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #690; + color: #690; } .token.operator, @@ -106,131 +108,131 @@ pre[class*="language-"] { .token.url, .language-css .token.string, .style .token.string { - color: #9a6e3a; + color: #9a6e3a; } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #07a; } .token.function, .token.class-name { - color: #DD4A68; + color: #DD4A68; } .token.regex, .token.important, .token.variable { - color: #e90; + color: #e90; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; + position: relative; + white-space: inherit; } .line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .line-numbers-rows > span { - display: block; - counter-increment: linenumber; - } + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } div.code-toolbar { - position: relative; + position: relative; } div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; } div.code-toolbar:hover > .toolbar { - opacity: 1; + opacity: 1; } /* Separate line b/c rules are thrown out if selector is invalid. IE11 and old Edge versions don't support :focus-within. */ div.code-toolbar:focus-within > .toolbar { - opacity: 1; + opacity: 1; } div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; + display: inline-block; } div.code-toolbar > .toolbar a { - cursor: pointer; + cursor: pointer; } div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { - color: #bbb; - font-size: .8em; - padding: 0 .5em; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .5em; + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; } div.code-toolbar > .toolbar a:hover, @@ -239,7 +241,6 @@ div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } - diff --git a/src/data/extra/web/css/globalstyles.css b/src/data/extra/web/css/globalstyles.css index 8cdc6ee0..64edf872 100644 --- a/src/data/extra/web/css/globalstyles.css +++ b/src/data/extra/web/css/globalstyles.css @@ -1,50 +1,78 @@ /* Styles here will be placed in the header of the HTML template as global embedded styles. */ /* Section numbering */ -#vx-content.vx-section-number, #vx-content.vx-section-number h1 { - counter-reset: section1 section2 section3 section4 section5; +#vx-content.vx-section-number, +#vx-content.vx-section-number-2 h1, +#vx-content.vx-section-number-3 h1, +#vx-content.vx-section-number-3 h2 { + counter-reset: section1 section2 section3 section4 section5 section6; } -#vx-content.vx-section-number h2 { - counter-reset: section2 section3 section4 seciton5; +#vx-content.vx-section-number-1 h1, +#vx-content.vx-section-number-2 h2, +#vx-content.vx-section-number-3 h3 { + counter-reset: section2 section3 section4 seciton5 section6; } -#vx-content.vx-section-number h3 { - counter-reset: section3 section4 section5; +#vx-content.vx-section-number-1 h2, +#vx-content.vx-section-number-2 h3, +#vx-content.vx-section-number-3 h4 { + counter-reset: section3 section4 section5 section6; } -#vx-content.vx-section-number h4 { - counter-reset: section4 section5; +#vx-content.vx-section-number-1 h3, +#vx-content.vx-section-number-2 h4, +#vx-content.vx-section-number-3 h5 { + counter-reset: section4 section5 section6; } -#vx-content.vx-section-number h5 { - counter-reset: section5; +#vx-content.vx-section-number-1 h4, +#vx-content.vx-section-number-2 h5 { + counter-reset: section5 section6; } -#vx-content.vx-section-number h2::before { +#vx-content.vx-section-number-1 h5 { + counter-reset: section6; +} + +#vx-content.vx-section-number-1 h1::before, +#vx-content.vx-section-number-2 h2::before, +#vx-content.vx-section-number-3 h3::before { counter-increment: section1; content: counter(section1) ". "; } -#vx-content.vx-section-number h3::before { +#vx-content.vx-section-number-1 h2::before, +#vx-content.vx-section-number-2 h3::before, +#vx-content.vx-section-number-3 h4::before { counter-increment: section2; content: counter(section1) "." counter(section2) ". "; } -#vx-content.vx-section-number h4::before { +#vx-content.vx-section-number-1 h3::before, +#vx-content.vx-section-number-2 h4::before, +#vx-content.vx-section-number-3 h5::before { counter-increment: section3; content: counter(section1) "." counter(section2) "." counter(section3) ". "; } -#vx-content.vx-section-number h5::before { +#vx-content.vx-section-number-1 h4::before, +#vx-content.vx-section-number-2 h5::before, +#vx-content.vx-section-number-3 h6::before { counter-increment: section4; content: counter(section1) "." counter(section2) "." counter(section3) "." counter(section4) ". "; } -#vx-content.vx-section-number h6::before { +#vx-content.vx-section-number-1 h5::before, +#vx-content.vx-section-number-2 h6::before { counter-increment: section5; content: counter(section1) "." counter(section2) "." counter(section3) "." counter(section4) "." counter(section5) ". "; } +#vx-content.vx-section-number-1 h6::before { + counter-increment: section6; + content: counter(section1) "." counter(section2) "." counter(section3) "." counter(section4) "." counter(section5) "." counter(section6) ". "; +} + #vx-content.vx-constrain-image-width img { max-width: 100%; height: auto; @@ -55,15 +83,35 @@ list-style: none; } -#vx-content.vx-section-number .vx-table-of-contents > ol > li ol { +#vx-content.vx-section-number-1 .vx-table-of-contents ol { counter-reset: toc; } - -#vx-content.vx-section-number .vx-table-of-contents > ol > li ol li { +#vx-content.vx-section-number-1 .vx-table-of-contents ol li { counter-increment: toc; } +#vx-content.vx-section-number-1 .vx-table-of-contents ol li:before { + content: counters(toc, '.') '. '; + font-family: cursive; +} -#vx-content.vx-section-number .vx-table-of-contents > ol > li ol li:before { +#vx-content.vx-section-number-2 .vx-table-of-contents > ol > li ol { + counter-reset: toc; +} +#vx-content.vx-section-number-2 .vx-table-of-contents > ol > li ol li { + counter-increment: toc; +} +#vx-content.vx-section-number-2 .vx-table-of-contents > ol > li ol li:before { + content: counters(toc, '.') '. '; + font-family: cursive; +} + +#vx-content.vx-section-number-3 .vx-table-of-contents > ol > li > ol > li ol { + counter-reset: toc; +} +#vx-content.vx-section-number-3 .vx-table-of-contents > ol > li > ol > li ol li { + counter-increment: toc; +} +#vx-content.vx-section-number-3 .vx-table-of-contents > ol > li > ol > li ol li:before { content: counters(toc, '.') '. '; font-family: cursive; } diff --git a/src/data/extra/web/js/vnotex.js b/src/data/extra/web/js/vnotex.js index e1377498..0676495b 100644 --- a/src/data/extra/web/js/vnotex.js +++ b/src/data/extra/web/js/vnotex.js @@ -37,6 +37,8 @@ class VNoteX extends EventEmitter { this.turndown = null; + this.sectionNumberBaseLevel = 2; + window.addEventListener('load', () => { console.log('window load finished'); @@ -52,6 +54,12 @@ class VNoteX extends EventEmitter { this.searcher = new MarkJs(this, this.contentContainer); + this.sectionNumberBaseLevel = window.vxOptions.sectionNumberBaseLevel; + if (this.sectionNumberBaseLevel > 3) { + console.warn('only support section number base level less than 3', this.sectionNumberBaseLevel); + this.sectionNumberBaseLevel = 3; + } + this.initialized = true; // Signal out. @@ -202,10 +210,13 @@ class VNoteX extends EventEmitter { setSectionNumberEnabled(p_enabled) { let sectionClass = 'vx-section-number'; + let sectionLevelClass = 'vx-section-number-' + this.sectionNumberBaseLevel; if (p_enabled) { this.contentContainer.classList.add(sectionClass); + this.contentContainer.classList.add(sectionLevelClass); } else { this.contentContainer.classList.remove(sectionClass); + this.contentContainer.classList.remove(sectionLevelClass); } } diff --git a/src/widgets/dialogs/settings/markdowneditorpage.cpp b/src/widgets/dialogs/settings/markdowneditorpage.cpp index 600bd40c..d9f12fb1 100644 --- a/src/widgets/dialogs/settings/markdowneditorpage.cpp +++ b/src/widgets/dialogs/settings/markdowneditorpage.cpp @@ -277,7 +277,7 @@ QGroupBox *MarkdownEditorPage::setupGeneralGroup() connect(m_sectionNumberComboBox, QOverload::of(&QComboBox::currentIndexChanged), this, [this](int p_index) { - m_sectionNumberBaseLevelSpinBox->setEnabled(p_index == MarkdownEditorConfig::SectionNumberMode::Edit); + m_sectionNumberBaseLevelSpinBox->setEnabled(p_index != MarkdownEditorConfig::SectionNumberMode::None); m_sectionNumberStyleComboBox->setEnabled(p_index == MarkdownEditorConfig::SectionNumberMode::Edit); });