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

This commit is contained in:
Le Tan 2021-01-12 20:34:45 +08:00
parent a43bd84570
commit 9e20f1b0a6
11 changed files with 386 additions and 323 deletions

View File

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

View File

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

View File

@ -16,6 +16,8 @@ namespace vnotex
bool m_sectionNumberEnabled = true;
int m_sectionNumberBaseLevel = 2;
bool m_constrainImageWidthEnabled = true;
bool m_protectFromXss = false;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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