support section number base level [1,3] in read mode

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";

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();

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;

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"));
 }

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",

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;
-
-	-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:before {
-			content: counter(linenumber);
-			color: #999;
-			display: block;
-			padding-right: 0.8em;
-			text-align: right;
-		}
+    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;
+
+}
+
+    .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;
+        }
 
 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;
 }
-

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;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
+    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;
+
+    -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;
-
-	-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:before {
-			content: counter(linenumber);
-			color: #999;
-			display: block;
-			padding-right: 0.8em;
-			text-align: right;
-		}
+    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;
+
+}
+
+    .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;
+        }
 
 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;
 }
-

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;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
+    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;
+
+    -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;
-
-	-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:before {
-			content: counter(linenumber);
-			color: #999;
-			display: block;
-			padding-right: 0.8em;
-			text-align: right;
-		}
+    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;
+
+}
+
+    .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;
+        }
 
 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;
 }
-

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-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 {
+#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 .vx-table-of-contents > ol > li ol li:before {
+#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;
 }

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);
         }
     }
 

src/widgets/dialogs/settings/markdowneditorpage.cpp

@@ -277,7 +277,7 @@ QGroupBox *MarkdownEditorPage::setupGeneralGroup()
 
         connect(m_sectionNumberComboBox, QOverload<int>::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);
                 });