Mathjax: support equation number in read mode

src/resources/common.css

@@ -4,3 +4,86 @@ div.mark-rect {
     border-radius: 2px;
     position: absolute;
 }
+
+/* Mathjax */
+x-eqs {
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+}
+
+x-eqs > x-eqn {
+    width: 100%;
+    margin-left: 3em;
+}
+
+x-eqs > span {
+    text-align:right;
+}
+/* Mathjax */
+
+/* View Image */
+.view-image,.view-svg {
+    transition: 0.3s;
+}
+
+.modal-box {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    padding-top: 50px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgb(68, 68, 68);
+    background-color: rgba(68, 68, 68, 0.95);
+}
+
+.modal-content {
+    margin: auto;
+    display: block;
+    width: auto;
+    height: auto;
+    cursor: move;
+}
+
+/* Add Animation */
+.modal-content {
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@-webkit-keyframes zoom {
+    from {-webkit-transform:scale(0)}
+    to {-webkit-transform:scale(1)}
+}
+
+@keyframes zoom {
+    from {transform:scale(0)}
+    to {transform:scale(1)}
+}
+
+/* The Close Button */
+span.modal-close {
+    position: absolute;
+    z-index: 1000;
+    top: 15px;
+    right: 35px;
+    color: #DADADA;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+span.modal-close:hover,
+span.modal-close:focus {
+    color: #EEEEEE;
+    text-decoration: none;
+    cursor: pointer;
+}
+/* View Image */

src/resources/markdown_template.html

@@ -21,8 +21,7 @@
         }
     </style>
 
-    <link rel="stylesheet" type="text/css" href="qrc:/resources/common.css">
-    <link rel="stylesheet" type="text/css" href="qrc:/resources/view_image.css">
+    <link rel="stylesheet" type="text/css" href="COMMON_CSS_PLACE_HOLDER">
     <link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
     <link rel="stylesheet" type="text/css" href="HIGHLIGHTJS_CSS_PLACE_HOLDER">
     <script src="qrc:/resources/qwebchannel.js"></script>

src/resources/view_image.css

@@ -1,62 +0,0 @@
-.view-image,.view-svg {
-    transition: 0.3s;
-}
-
-.modal-box {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    padding-top: 50px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: rgb(68, 68, 68);
-    background-color: rgba(68, 68, 68, 0.95);
-}
-
-.modal-content {
-    margin: auto;
-    display: block;
-    width: auto;
-    height: auto;
-    cursor: move;
-}
-
-/* Add Animation */
-.modal-content {
-    -webkit-animation-name: zoom;
-    -webkit-animation-duration: 0.6s;
-    animation-name: zoom;
-    animation-duration: 0.6s;
-}
-
-@-webkit-keyframes zoom {
-    from {-webkit-transform:scale(0)}
-    to {-webkit-transform:scale(1)}
-}
-
-@keyframes zoom {
-    from {transform:scale(0)}
-    to {transform:scale(1)}
-}
-
-/* The Close Button */
-span.modal-close {
-    position: absolute;
-    z-index: 1000;
-    top: 15px;
-    right: 35px;
-    color: #DADADA;
-    font-size: 40px;
-    font-weight: bold;
-    transition: 0.3s;
-}
-
-span.modal-close:hover,
-span.modal-close:focus {
-    color: #EEEEEE;
-    text-decoration: none;
-    cursor: pointer;
-}

src/utils/markdown-it/markdown-it-texmath.js

@@ -18,7 +18,8 @@ function texmath(md, options) {
 
         for (let rule of texmath.rules[delimiters].block) {
             md.block.ruler.before('fence', rule.name, texmath.block(rule));
-            md.renderer.rules[rule.name] = (tokens, idx) => rule.tmpl.replace(/\$1/,texmath.render(tokens[idx].content,true));
+            md.renderer.rules[rule.name] = (tokens, idx) => rule.tmpl.replace(/\$2/,tokens[idx].info)  // equation number
+                                                                     .replace(/\$1/,texmath.render(tokens[idx].content,true));
         }
     }
 }
@@ -58,6 +59,7 @@ texmath.block = (rule) =>
                 let token = state.push(rule.name, 'math', 0);
                 token.block = true;
                 token.content = res[1];
+                token.info = res[2];
                 token.markup = rule.tag;
             }
             for (let line=begLine, endpos=res.lastIndex-1; line < endLine; line++)
@@ -101,6 +103,11 @@ texmath.rules = {
             }
         ],
         block: [
+            {   name: 'math_block_eqno',
+                rex: /\\\[(.+?)\\\]\s*?\(([^)$\r\n]+?)\)\s*$/gmy,
+                tmpl: '<x-eqs><x-eqn class="tex-to-render">$1</x-eqn><span>($2)</span></x-eqs>',
+                tag: '\\['
+            },
             {   name: 'math_block',
                 rex: /\\\[(.+?)\\\]\s*$/gmy,
                 tmpl: '<x-eqn class="tex-to-render">$1</x-eqn>',
@@ -117,6 +124,11 @@ texmath.rules = {
             }
         ],
         block: [
+            {   name: 'math_block_eqno',
+                rex: /`{3}math\s+?([^`]+?)\s+?`{3}\s*?\(([^)$\r\n]+?)\)\s*$/gmy,
+                tmpl: '<x-eqs><x-eqn class="tex-to-render">$1</x-eqn><span>($2)</span></x-eqs>',
+                tag: '```math'
+            },
             {   name: 'math_block',
                 rex: /`{3}math\s+?([^`]+?)\s+?`{3}\s*$/gmy,
                 tmpl: '<x-eqn class="tex-to-render">$1</x-eqn>',
@@ -142,6 +154,11 @@ texmath.rules = {
             }
         ],
         block: [
+            {   name: 'math_block_eqno',
+                rex: /\${2}([^$]*?)\${2}\s*?\(([^)$\r\n]+?)\)\s*$/gmy,
+                tmpl: '<x-eqs><x-eqn class="tex-to-render">$1</x-eqn><span>($2)</span></x-eqs>',
+                tag: '$$'
+            },
             {   name: 'math_block',
                 rex: /\${2}([^$]*?)\${2}\s*$/gmy,
                 tmpl: '<x-eqn class="tex-to-render">$1</x-eqn>',

src/vconfigmanager.cpp

@@ -41,6 +41,8 @@ const QString VConfigManager::c_templateConfigFolder = QString("templates");
 
 const QString VConfigManager::c_snippetConfigFolder = QString("snippets");
 
+const QString VConfigManager::c_resourceConfigFolder = QString("resources");
+
 const QString VConfigManager::c_warningTextStyle = QString("color: #C9302C; font: bold");
 
 const QString VConfigManager::c_dataTextStyle = QString("font: bold");
@@ -64,6 +66,8 @@ void VConfigManager::initialize()
 {
     initSettings();
 
+    checkVersion();
+
     initThemes();
 
     initEditorStyles();
@@ -858,6 +862,30 @@ const QString &VConfigManager::getSnippetConfigFilePath() const
     return path;
 }
 
+QString VConfigManager::getResourceConfigFolder() const
+{
+    return QDir(getConfigFolder()).filePath(c_resourceConfigFolder);
+}
+
+const QString &VConfigManager::getCommonCssUrl() const
+{
+    static QString cssPath;
+    if (cssPath.isEmpty()) {
+        cssPath = QDir(getResourceConfigFolder()).filePath("common.css");
+        if (m_versionChanged || !QFileInfo::exists(cssPath)) {
+            // Output the default one.
+            if (!VUtils::copyFile(":/resources/common.css", cssPath, false)) {
+                cssPath = "qrc:/resources/common.css";
+                return cssPath;
+            }
+        }
+
+        cssPath = QUrl::fromLocalFile(cssPath).toString();
+    }
+
+    return cssPath;
+}
+
 const QString VConfigManager::getKeyboardLayoutConfigFilePath() const
 {
     return QDir(getConfigFolder()).filePath(c_keyboardLayoutConfigFile);
@@ -1637,3 +1665,12 @@ QString VConfigManager::getRenderBackgroundColor(const QString &p_bgName) const
     return QString();
 }
 
+void VConfigManager::checkVersion()
+{
+    const QString key("version");
+    QString ver = getConfigFromSettings("global", key).toString();
+    m_versionChanged = ver != c_version;
+    if (m_versionChanged) {
+        setConfigToSettings("global", key, c_version);
+    }
+}

src/vconfigmanager.h

@@ -457,6 +457,11 @@ public:
     // Get the folder c_codeBlockStyleConfigFolder in the config folder.
     const QString &getCodeBlockStyleConfigFolder() const;
 
+    // Get the folder c_resourceConfigFolder in the config folder.
+    QString getResourceConfigFolder() const;
+
+    const QString &getCommonCssUrl() const;
+
     // All the editor styles.
     QList<QString> getEditorStyles() const;
 
@@ -663,6 +668,8 @@ private:
 
     QString getEditorStyleFile() const;
 
+    void checkVersion();
+
     // Default font and palette.
     QFont m_defaultEditFont;
     QPalette m_defaultEditPalette;
@@ -1032,6 +1039,9 @@ private:
     // Whether download image from parse and paste.
     bool m_parsePasteLocalImage;
 
+    // Whether the VNote instance has different version of vnote.ini.
+    bool m_versionChanged;
+
     // The name of the config file in each directory.
     static const QString c_dirConfigFile;
 
@@ -1080,6 +1090,9 @@ private:
 
     // The default export output folder name.
     static const QString c_exportFolderName;
+
+    // The folder name of resource files.
+    static const QString c_resourceConfigFolder;
 };
 
 

src/vconstants.h

@@ -44,6 +44,7 @@ namespace HtmlHolder
     static const QString c_JSHolder = "JS_PLACE_HOLDER";
     static const QString c_cssHolder = "CSS_PLACE_HOLDER";
     static const QString c_codeBlockCssHolder = "HIGHLIGHTJS_CSS_PLACE_HOLDER";
+    static const QString c_commonCssHolder = "COMMON_CSS_PLACE_HOLDER";
     static const QString c_globalStyleHolder = "/* STYLE_GLOBAL_PLACE_HOLDER */";
     static const QString c_extraHolder = "<!-- EXTRA_PLACE_HOLDER -->";
     static const QString c_bodyHolder = "<!-- BODY_PLACE_HOLDER -->";

src/vnote.cpp

@@ -120,6 +120,7 @@ QString VNote::generateHtmlTemplate(const QString &p_renderBg,
     g_palette->fillStyle(templ);
 
     // Must replace the code block holder first.
+    templ.replace(HtmlHolder::c_commonCssHolder, g_config->getCommonCssUrl());
     templ.replace(HtmlHolder::c_codeBlockCssHolder, p_codeBlockStyleUrl);
     templ.replace(HtmlHolder::c_cssHolder, p_renderStyleUrl);
 

src/vnote.qrc

@@ -261,7 +261,6 @@
         <file>resources/icons/tag_explorer.svg</file>
         <file>resources/icons/tag.svg</file>
         <file>resources/view_image.js</file>
-        <file>resources/view_image.css</file>
         <file>resources/icons/decrease_outline_level.svg</file>
         <file>resources/icons/increase_outline_level.svg</file>
         <file>utils/markdown-it/markdown-it-texmath.js</file>