.highlighted-anchor { }
body { margin: 0px auto; font-family: Helvetica, sans-serif, Tahoma, Arial, Verdana, Geneva, Georgia, Palatino, “Times New Roman”, “Hiragino Sans GB”, 冬青黑体, “Microsoft YaHei”, 微软雅黑, “Microsoft YaHei UI”, “WenQuanYi Micro Hei”, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, “Liberation Sans”, “Droid Sans”, NSimSun, 新宋体, SimSun, 宋体; color: rgb(34, 34, 34); line-height: 1.5; padding: 15px; background: rgb(245, 245, 245); font-size: 16px }
h1,h2,h3,h4,h5,h6 { color: rgb(34, 34, 34); font-weight: bold; margin-top: 20px; margin-bottom: 10px; padding: 0px }
p { padding: 0px; margin-top: 16px; margin-bottom: 16px }
h1 { font-size: 30px }
h2 { font-size: 26px }
h3 { font-size: 24px }
h4 { font-size: 22px }
h5 { font-size: 20px }
h6 { font-size: 18px }
a { color: rgb(0, 153, 255); margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: none }
a:hover { text-decoration: underline; color: rgb(255, 102, 0) }
a:visited { color: purple }
ul,ol { padding: 0px 0px 0px 24px }
li { line-height: 24px }
li ul,li ol { margin-left: 16px }
p,ul,ol { font-size: 16px; line-height: 24px }
pre { display: block }
code { font-family: Consolas, Monaco, monospace, Courier; font-size: 16px; color: rgb(142, 36, 170) }
pre code { display: block; padding: 0.5em; color: rgb(34, 34, 34); background-color: rgb(224, 224, 224); line-height: 1.5; font-family: Consolas, Monaco, monospace, Courier; white-space: pre }
aside { display: block; float: right; width: 390px }
blockquote { color: rgb(102, 102, 102); border-left: 0.5em solid rgb(122, 122, 122); padding: 0px 2em; margin-left: 0px }
blockquote p { color: rgb(102, 102, 102) }
hr { display: block; text-align: left; margin: 1em 0px; border: none; height: 2px; background: rgb(153, 153, 153) }
table { padding: 0px; border-collapse: collapse }
table tr { border-top: 1px solid rgb(204, 204, 204); background-color: white; margin: 0px; padding: 0px }
table tr:nth-child(2n) { background-color: rgb(248, 248, 248) }
table tr th { font-weight: bold; border: 1px solid rgb(204, 204, 204); margin: 0px; padding: 6px 13px }
table tr td { border: 1px solid rgb(204, 204, 204); margin: 0px; padding: 6px 13px }
table tr th :first-child,table tr td :first-child { margin-top: 0px }
table tr th :last-child,table tr td :last-child { margin-bottom: 0px }
div.mermaid-diagram { margin: 16px 0px }
div.flowchart-diagram { padding: 0px 5px; margin: 16px 0px; width: fit-content; overflow: hidden }
div.plantuml-diagram { padding: 5px 5px 0px; margin: 16px 0px; width: fit-content; overflow: hidden }
.img-package { text-align: center }
img.img-center { display: block; margin-left: auto; margin-right: auto }
div.img-caption { min-width: 20%; max-width: 80%; display: inline-block; padding: 10px; margin: 0px auto; border-bottom: 1px solid rgb(192, 192, 192); color: rgb(108, 108, 108); text-align: center; line-height: 1.5 }
table.hljs-ln tr { border: none; background-color: transparent }
table.hljs-ln tr td { border: none; background-color: transparent }
table.hljs-ln tr td.hljs-ln-numbers { text-align: center; color: rgb(170, 170, 170); border-right: 1px solid rgb(204, 204, 204); vertical-align: top; padding-right: 5px; white-space: nowrap }
table.hljs-ln tr td.hljs-ln-code { padding-left: 10px }
::-webkit-scrollbar { background-color: rgb(234, 234, 234); width: 14px; height: 14px; border: none }
::-webkit-scrollbar-corner { background-color: rgb(234, 234, 234) }
::-webkit-scrollbar-button { height: 14px; width: 14px; background-color: rgb(234, 234, 234) }
::-webkit-scrollbar-button:hover { background-color: rgb(208, 208, 208) }
::-webkit-scrollbar-button:active { background-color: rgb(178, 178, 178) }
::-webkit-scrollbar-track { background-color: rgb(234, 234, 234) }
::-webkit-scrollbar-thumb { border: none; background-color: rgb(218, 218, 218) }
::-webkit-scrollbar-thumb:hover { background-color: rgb(208, 208, 208) }
::-webkit-scrollbar-thumb:active { background-color: rgb(178, 178, 178) }
::-webkit-scrollbar-button:horizontal:increment { background-repeat: no-repeat }
::-webkit-scrollbar-button:horizontal:decrement { background-repeat: no-repeat }
::-webkit-scrollbar-button:vertical:increment { background-repeat: no-repeat }
::-webkit-scrollbar-button:vertical:decrement { background-repeat: no-repeat }
::selection { background: rgb(100, 181, 246) }
.hljs { display: block; padding: 0.5em; background: rgb(224, 224, 224) }
.hljs,.hljs-subst { color: rgb(54, 54, 54) }
.hljs-comment { color: rgb(118, 118, 118) }
.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name { color: rgb(0, 0, 238) }
.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion { color: rgb(136, 0, 0) }
.hljs-title,.hljs-section { color: rgb(136, 0, 0); font-weight: bold }
.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo { color: rgb(188, 96, 96) }
.hljs-literal { color: rgb(175, 0, 215) }
.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition { color: rgb(0, 135, 0) }
.hljs-meta { color: rgb(31, 113, 153) }
.hljs-meta-string { color: rgb(77, 153, 191) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: bold }
.mermaid-diagram .mermaid .label { color: rgb(51, 51, 51) }
.mermaid-diagram .node rect,.mermaid-diagram .node circle,.mermaid-diagram .node ellipse,.mermaid-diagram .node polygon { }
.mermaid-diagram .edgePath .path { }
.mermaid-diagram .edgeLabel { background-color: rgb(232, 232, 232) }
.mermaid-diagram .cluster rect { }
.mermaid-diagram .cluster text { }
.mermaid-diagram .actor { }
.mermaid-diagram text.actor { }
.mermaid-diagram .actor-line { }
.mermaid-diagram .messageLine0 { }
.mermaid-diagram .messageLine1 { }
.mermaid-diagram #arrowhead { }
.mermaid-diagram #crosshead path { }
.mermaid-diagram .messageText { }
.mermaid-diagram .labelBox { }
.mermaid-diagram .labelText { }
.mermaid-diagram .loopText { }
.mermaid-diagram .loopLine { }
.mermaid-diagram .note { }
.mermaid-diagram .noteText { font-family: “trebuchet ms”, verdana, arial; font-size: 14px }
.mermaid-diagram .section { opacity: 0.2 }
.mermaid-diagram .section0 { }
.mermaid-diagram .section2 { }
.mermaid-diagram .section1,.mermaid-diagram .section3 { opacity: 0.2 }
.mermaid-diagram .sectionTitle0 { }
.mermaid-diagram .sectionTitle1 { }
.mermaid-diagram .sectionTitle2 { }
.mermaid-diagram .sectionTitle3 { }
.mermaid-diagram .sectionTitle { font-size: 11px }
.mermaid-diagram .grid .tick { opacity: 0.3 }
.mermaid-diagram .grid path { }
.mermaid-diagram .today { }
.mermaid-diagram .task { }
.mermaid-diagram .taskText { font-size: 11px }
.mermaid-diagram .taskTextOutsideRight { font-size: 11px }
.mermaid-diagram .taskTextOutsideLeft { font-size: 11px }
.mermaid-diagram .taskText0,.mermaid-diagram .taskText1,.mermaid-diagram .taskText2,.mermaid-diagram .taskText3 { }
.mermaid-diagram .task0,.mermaid-diagram .task1,.mermaid-diagram .task2,.mermaid-diagram .task3 { }
.mermaid-diagram .taskTextOutside0,.mermaid-diagram .taskTextOutside2 { }
.mermaid-diagram .taskTextOutside1,.mermaid-diagram .taskTextOutside3 { }
.mermaid-diagram .active0,.mermaid-diagram .active1,.mermaid-diagram .active2,.mermaid-diagram .active3 { }
.mermaid-diagram .activeText0,.mermaid-diagram .activeText1,.mermaid-diagram .activeText2,.mermaid-diagram .activeText3 { }
.mermaid-diagram .done0,.mermaid-diagram .done1,.mermaid-diagram .done2,.mermaid-diagram .done3 { }
.mermaid-diagram .doneText0,.mermaid-diagram .doneText1,.mermaid-diagram .doneText2,.mermaid-diagram .doneText3 { }
.mermaid-diagram .crit0,.mermaid-diagram .crit1,.mermaid-diagram .crit2,.mermaid-diagram .crit3 { }
.mermaid-diagram .activeCrit0,.mermaid-diagram .activeCrit1,.mermaid-diagram .activeCrit2,.mermaid-diagram .activeCrit3 { }
.mermaid-diagram .doneCrit0,.mermaid-diagram .doneCrit1,.mermaid-diagram .doneCrit2,.mermaid-diagram .doneCrit3 { cursor: pointer }
.mermaid-diagram .doneCritText0,.mermaid-diagram .doneCritText1,.mermaid-diagram .doneCritText2,.mermaid-diagram .doneCritText3 { }
.mermaid-diagram .activeCritText0,.mermaid-diagram .activeCritText1,.mermaid-diagram .activeCritText2,.mermaid-diagram .activeCritText3 { }
.mermaid-diagram .titleText { font-size: 18px }
.mermaid-diagram .node text { font-family: “trebuchet ms”, verdana, arial; font-size: 14px }
.mermaid-diagram div.mermaidTooltip { position: absolute; text-align: center; max-width: 200px; padding: 2px; font-family: “trebuchet ms”, verdana, arial; font-size: 12px; background: rgb(255, 255, 222); border: 1px solid rgb(170, 170, 51); z-index: 100 }
.MathJax_Hover_Frame { display: inline-block; position: absolute; border: 1px solid rgb(170, 102, 221) !important }
.MathJax_Menu_Button .MathJax_Hover_Arrow { position: absolute; cursor: pointer; display: inline-block; border: 2px solid rgb(170, 170, 170); font-family: “Courier New”, Courier; font-size: 9px; color: rgb(240, 240, 240) }
.MathJax_Menu_Button .MathJax_Hover_Arrow span { display: block; background-color: rgb(170, 170, 170); border: 1px solid; line-height: 0; padding: 4px }
.MathJax_Hover_Arrow:hover { color: white !important; border: 2px solid rgb(204, 204, 204) !important }
.MathJax_Hover_Arrow:hover span { background-color: rgb(204, 204, 204) !important }
#MathJax_About { position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: rgb(221, 221, 221); color: black; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0px; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
#MathJax_About.MathJax_MousePost { outline: none }
.MathJax_Menu { position: absolute; background-color: white; color: black; width: auto; padding: 2px; border: 1px solid rgb(204, 204, 204); margin: 0px; cursor: default; font-style: normal; font-weight: normal; font-size: 15px; font-family: “Segoe UI”; font-variant: normal; text-align: left; text-indent: 0px; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
.MathJax_MenuItem { padding: 2px 2em; background: transparent }
.MathJax_MenuArrow { position: absolute; right: 0.5em; padding-top: 0.25em; color: rgb(102, 102, 102); font-size: 0.75em }
.MathJax_MenuActive .MathJax_MenuArrow { color: white }
.MathJax_MenuArrow.RTL { left: 0.5em; right: auto }
.MathJax_MenuCheck { position: absolute; left: 0.7em }
.MathJax_MenuCheck.RTL { right: 0.7em; left: auto }
.MathJax_MenuRadioCheck { position: absolute; left: 1em }
.MathJax_MenuRadioCheck.RTL { right: 1em; left: auto }
.MathJax_MenuLabel { padding: 2px 2em 4px 1.33em; font-style: italic }
.MathJax_MenuRule { border-top: 1px solid rgb(204, 204, 204); margin: 4px 1px 0px }
.MathJax_MenuDisabled { color: graytext }
.MathJax_MenuActive { background-color: highlight; color: highlighttext }
.MathJax_MenuDisabled:focus,.MathJax_MenuLabel:focus { background-color: rgb(232, 232, 232) }
.MathJax_ContextMenu:focus { outline: none }
.MathJax_ContextMenu .MathJax_MenuItem:focus { outline: none }
#MathJax_AboutClose { top: 0.2em; right: 0.2em }
.MathJax_Menu .MathJax_MenuClose { top: -10px; left: -10px }
.MathJax_MenuClose { position: absolute; cursor: pointer; display: inline-block; border: 2px solid rgb(170, 170, 170); font-family: “Courier New”, Courier; font-size: 24px; color: rgb(240, 240, 240) }
.MathJax_MenuClose span { display: block; background-color: rgb(170, 170, 170); border: 1.5px solid; line-height: 0; padding: 8px 0px 6px }
.MathJax_MenuClose:hover { color: white !important; border: 2px solid rgb(204, 204, 204) !important }
.MathJax_MenuClose:hover span { background-color: rgb(204, 204, 204) !important }
.MathJax_MenuClose:hover:focus { outline: none }
.MathJax_Preview .MJXf-math { color: inherit !important }
.MJX_Assistive_MathML { top: 0px; left: 0px; clip: rect(1px 1px 1px 1px); position: absolute !important; padding: 1px 0px 0px !important; border: 0px !important; height: 1px !important; width: 1px !important; overflow: hidden !important; display: block !important }
.MJX_Assistive_MathML.MJX_Assistive_MathML_Block { width: 100% !important }
#MathJax_Zoom { position: absolute; background-color: rgb(240, 240, 240); overflow: auto; display: block; z-index: 301; padding: 0.5em; border: 1px solid black; margin: 0px; font-weight: normal; font-style: normal; text-align: left; text-indent: 0px; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none }
#MathJax_ZoomOverlay { position: absolute; left: 0px; top: 0px; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0px; background-color: white; opacity: 0 }
#MathJax_ZoomFrame { position: relative; display: inline-block; height: 0px; width: 0px }
#MathJax_ZoomEventTrap { position: absolute; left: 0px; top: 0px; z-index: 302; display: inline-block; border: 0px; padding: 0px; margin: 0px; background-color: white; opacity: 0 }
.MathJax_Preview { color: rgb(136, 136, 136) }
#MathJax_Message { position: fixed; left: 1px; bottom: 2px; background-color: rgb(230, 230, 230); border: 1px solid rgb(149, 149, 149); margin: 0px; padding: 2px 8px; z-index: 102; color: black; font-size: 80%; width: auto; white-space: nowrap }
#MathJax_MSIE_Frame { position: absolute; top: 0px; left: 0px; width: 0px; z-index: 101; border: 0px; margin: 0px; padding: 0px }
.MathJax_Error { color: rgb(204, 0, 0); font-style: italic }
.MJXp-script { font-size: 0.8em }
.MJXp-right { }
.MJXp-bold { font-weight: bold }
.MJXp-italic { font-style: italic }
.MJXp-scr { font-family: MathJax_Script, “Times New Roman”, Times, STIXGeneral, serif }
.MJXp-frak { font-family: MathJax_Fraktur, “Times New Roman”, Times, STIXGeneral, serif }
.MJXp-sf { font-family: MathJax_SansSerif, “Times New Roman”, Times, STIXGeneral, serif }
.MJXp-cal { font-family: MathJax_Caligraphic, “Times New Roman”, Times, STIXGeneral, serif }
.MJXp-mono { font-family: MathJax_Typewriter, “Times New Roman”, Times, STIXGeneral, serif }
.MJXp-largeop { font-size: 150% }
.MJXp-largeop.MJXp-int { vertical-align: -0.2em }
.MJXp-math { display: inline-block; line-height: 1.2; text-indent: 0px; font-family: “Times New Roman”, Times, STIXGeneral, serif; white-space: nowrap; border-collapse: collapse }
.MJXp-display { display: block; text-align: center; margin: 1em 0px }
.MJXp-math span { display: inline-block }
.MJXp-box { text-align: center; display: block !important }
.MJXp-box::after { content: ” ” }
.MJXp-rule { margin-top: 0.1em; display: block !important }
.MJXp-char { display: block !important }
.MJXp-mo { margin: 0px 0.15em }
.MJXp-mfrac { margin: 0px 0.125em; vertical-align: 0.25em }
.MJXp-denom { width: 100%; display: inline-table !important }
.MJXp-denom>* { display: table-row !important }
.MJXp-surd { vertical-align: top }
.MJXp-surd>* { display: block !important }
.MJXp-script-box>* { height: 50%; display: table !important }
.MJXp-script-box>*>* { vertical-align: top; display: table-cell !important }
.MJXp-script-box>:last-child>* { vertical-align: bottom }
.MJXp-script-box>*>*>* { display: block !important }
.MJXp-mphantom { visibility: hidden }
.MJXp-munderover { display: inline-table !important }
.MJXp-over { text-align: center; display: inline-block !important }
.MJXp-over>* { display: block !important }
.MJXp-munderover>* { display: table-row !important }
.MJXp-mtable { vertical-align: 0.25em; margin: 0px 0.125em }
.MJXp-mtable>* { vertical-align: middle; display: inline-table !important }
.MJXp-mtr { display: table-row !important }
.MJXp-mtd { text-align: center; padding: 0.5em 0px 0px 0.5em; display: table-cell !important }
.MJXp-mtr>.MJXp-mtd:first-child { padding-left: 0px }
.MJXp-mtr:first-child>.MJXp-mtd { padding-top: 0px }
.MJXp-mlabeledtr { display: table-row !important }
.MJXp-mlabeledtr>.MJXp-mtd:first-child { padding-left: 0px }
.MJXp-mlabeledtr:first-child>.MJXp-mtd { padding-top: 0px }
.MJXp-merror { background-color: rgb(255, 255, 136); color: rgb(204, 0, 0); border: 1px solid rgb(204, 0, 0); padding: 1px 3px; font-style: normal; font-size: 90% }
.MJXp-scale0 { }
.MJXp-scale1 { }
.MJXp-scale2 { }
.MJXp-scale3 { }
.MJXp-scale4 { }
.MJXp-scale5 { }
.MJXp-scale6 { }
.MJXp-scale7 { }
.MJXp-scale8 { }
.MJXp-scale9 { }
.MathJax_PHTML .noError { font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid }

VNote 1.15，更好的图表，更好的预览

1. Support PlantUML and Graphviz

Now you could enjoy PlantUML and Graphviz in VNote! You could use online PlantUML server or local JAR. Pay attention to the privacy issue if you choose online service.

Please reference to the Markdown guide help for details.

2. In-Place Preview for MathJax and Diagrams

Besides images, VNote now support in-place preview for MathJax, PlantUML, Graphviz, and Flowchart.js.

3. Live-Preview for Diagrams

To help drawing a large diagrams, VNote provide a side-by-side live-preview panel. Press Ctrl+E I to trigger it.

4. Embedding Images in exported HTML

VNote could embed images in exprted HTML as data URI, which enables you to share your notes in just a few HTML files without image folders.

5. Others

• Restore cursor position when recovering pages at startup;
• UniversalEntry
  • Ctrl+I to expand/collapse current item;
  • Ctrl+L to go to current item’s parent item;
• Markdown-it: aware of YAML format metadata in notes;
• Show hovered link in status line in read mode;

Don’t forget to advertise VNote to your friends! 🙂