support custom code block style of highlightjs

Add two config:
- template_code_block_css
- template_code_block_css_url

src/resources/hoedown.js

@@ -41,6 +41,7 @@ var updateHtml = function(html) {
         }
     }
 
+    addClassToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/markdown-it.js

@@ -97,6 +97,7 @@ var updateText = function(text) {
     insertImageCaption();
     renderMermaid('lang-mermaid');
     renderFlowchart('lang-flowchart');
+    addClassToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/markdown_template.html

@@ -22,7 +22,7 @@
     </style>
 
     <link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
-    <link rel="stylesheet" type="text/css" href="qrc:/utils/highlightjs/styles/vnote.css">
+    <link rel="stylesheet" type="text/css" href="HIGHLIGHTJS_CSS_PLACE_HOLDER">
     <script src="qrc:/resources/qwebchannel.js"></script>
     <script src="qrc:/utils/highlightjs/highlight.pack.js"></script>
     <!-- EXTRA_PLACE_HOLDER -->

src/resources/markdown_template.js

@@ -833,3 +833,14 @@ var renderCodeBlockLineNumber = function() {
         }
     }
 };
+
+var addClassToCodeBlock = function() {
+    var hljsClass = 'hljs';
+    var codes = document.getElementsByTagName('code');
+    for (var i = 0; i < codes.length; ++i) {
+        var code = codes[i];
+        if (code.parentElement.tagName.toLowerCase() == 'pre') {
+            code.classList.add(hljsClass);
+        }
+    }
+};

src/resources/marked.js

@@ -49,6 +49,7 @@ var updateText = function(text) {
     insertImageCaption();
     renderMermaid('lang-mermaid');
     renderFlowchart('lang-flowchart');
+    addClassToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/showdown.js

@@ -76,6 +76,7 @@ var updateText = function(text) {
     highlightCodeBlocks(document, VEnableMermaid, VEnableFlowchart);
     renderMermaid('language-mermaid');
     renderFlowchart('language-flowchart');
+    addClassToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/styles/default.css

@@ -77,7 +77,6 @@ p, ul, ol {
 }
 
 pre {
-    padding: 0px 24px;
     background-color: #f8f8f8;
     border-radius: 3px;
     border: 1px solid #cccccc;
@@ -92,12 +91,12 @@ code {
 }
 
 pre code {
-   margin: 0;
-   padding: 0;
-   border: none;
-   background: transparent;
-   overflow: auto;
-   color: #363636;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: auto;
+    color: #363636;
 }
 
 aside {

src/resources/vnote.ini

@@ -1,6 +1,16 @@
 [global]
 welcome_page_path=:/resources/welcome.html
+
+; CSS style for Markdown template
 template_css=default
+
+; Code block CSS style for Markdown template
+template_code_block_css=vnote
+
+; Code block CSS style file URL for Markdown template
+; If not empty, VNote will ignore template_code_block_css
+template_code_block_css_url=
+
 editor_style=default
 current_notebook=0
 tab_stop_width=4

src/vconfigmanager.cpp

@@ -18,7 +18,9 @@ const QString VConfigManager::c_obsoleteDirConfigFile = QString(".vnote.json");
 const QString VConfigManager::c_dirConfigFile = QString("_vnote.json");
 const QString VConfigManager::defaultConfigFilePath = QString(":/resources/vnote.ini");
 const QString VConfigManager::c_styleConfigFolder = QString("styles");
+const QString VConfigManager::c_codeBlockStyleConfigFolder = QString("codeblock_styles");
 const QString VConfigManager::c_defaultCssFile = QString(":/resources/styles/default.css");
+const QString VConfigManager::c_defaultCodeBlockCssFile = QString(":/utils/highlightjs/styles/vnote.css");
 const QString VConfigManager::c_defaultMdhlFile = QString(":/resources/styles/default.mdhl");
 const QString VConfigManager::c_solarizedDarkMdhlFile = QString(":/resources/styles/solarized-dark.mdhl");
 const QString VConfigManager::c_solarizedLightMdhlFile = QString(":/resources/styles/solarized-light.mdhl");
@@ -55,6 +57,7 @@ void VConfigManager::initialize()
 
     // Override the default css styles on start up.
     outputDefaultCssStyle();
+    outputDefaultCodeBlockCssStyle();
     outputDefaultEditorStyle();
 
     m_defaultEditPalette = QTextEdit().palette();
@@ -63,6 +66,8 @@ void VConfigManager::initialize()
 
     welcomePagePath = getConfigFromSettings("global", "welcome_page_path").toString();
     m_templateCss = getConfigFromSettings("global", "template_css").toString();
+    m_templateCodeBlockCss = getConfigFromSettings("global", "template_code_block_css").toString();
+    m_templateCodeBlockCssUrl = getConfigFromSettings("global", "template_code_block_css_url").toString();
     curNotebookIndex = getConfigFromSettings("global", "current_notebook").toInt();
 
     markdownExtensions = hoedown_extensions(HOEDOWN_EXT_TABLES | HOEDOWN_EXT_FENCED_CODE |
@@ -606,6 +611,11 @@ QString VConfigManager::getStyleConfigFolder() const
     return getConfigFolder() + QDir::separator() + c_styleConfigFolder;
 }
 
+QString VConfigManager::getCodeBlockStyleConfigFolder() const
+{
+    return getStyleConfigFolder() + QDir::separator() + c_codeBlockStyleConfigFolder;
+}
+
 QVector<QString> VConfigManager::getCssStyles() const
 {
     QVector<QString> res;
@@ -627,6 +637,27 @@ QVector<QString> VConfigManager::getCssStyles() const
     return res;
 }
 
+QVector<QString> VConfigManager::getCodeBlockCssStyles() const
+{
+    QVector<QString> res;
+    QDir dir(getCodeBlockStyleConfigFolder());
+    if (!dir.exists()) {
+        // Output pre-defined CSS styles to this folder.
+        outputDefaultCodeBlockCssStyle();
+    }
+
+    // Get all the .css files in the folder.
+    dir.setFilter(QDir::Files | QDir::NoSymLinks);
+    dir.setNameFilters(QStringList("*.css"));
+    QStringList files = dir.entryList();
+    res.reserve(files.size());
+    for (auto const &item : files) {
+        res.push_back(item.left(item.size() - 4));
+    }
+
+    return res;
+}
+
 QVector<QString> VConfigManager::getEditorStyles() const
 {
     QVector<QString> res;
@@ -651,15 +682,46 @@ QVector<QString> VConfigManager::getEditorStyles() const
 bool VConfigManager::outputDefaultCssStyle() const
 {
     // Make sure the styles folder exists.
-    QDir dir(getConfigFolder());
-    if (!dir.exists(c_styleConfigFolder)) {
-        if (!dir.mkdir(c_styleConfigFolder)) {
+    QString folderPath = getStyleConfigFolder();
+    QDir dir(folderPath);
+    if (!dir.exists()) {
+        if (!dir.mkpath(folderPath)) {
             return false;
         }
     }
 
     QString srcPath = c_defaultCssFile;
-    QString destPath = getStyleConfigFolder() + QDir::separator() + QFileInfo(srcPath).fileName();
+    QString destPath = folderPath + QDir::separator() + QFileInfo(srcPath).fileName();
+
+    if (QFileInfo::exists(destPath)) {
+        QString bakPath = destPath + ".bak";
+        // We only keep one bak file.
+        if (!QFileInfo::exists(bakPath)) {
+            QFile::rename(destPath, bakPath);
+        } else {
+            // Just delete the default style.
+            QFile file(destPath);
+            file.setPermissions(QFile::ReadUser | QFile::WriteUser);
+            file.remove();
+        }
+    }
+
+    return VUtils::copyFile(srcPath, destPath, false);
+}
+
+bool VConfigManager::outputDefaultCodeBlockCssStyle() const
+{
+    // Make sure the styles folder exists.
+    QString folderPath = getCodeBlockStyleConfigFolder();
+    QDir dir(folderPath);
+    if (!dir.exists()) {
+        if (!dir.mkpath(folderPath)) {
+            return false;
+        }
+    }
+
+    QString srcPath = c_defaultCodeBlockCssFile;
+    QString destPath = folderPath + QDir::separator() + QFileInfo(srcPath).fileName();
 
     if (QFileInfo::exists(destPath)) {
         QString bakPath = destPath + ".bak";
@@ -753,6 +815,36 @@ QString VConfigManager::getTemplateCssUrl()
     return cssPath;
 }
 
+// The URL will be used in the Web page.
+QString VConfigManager::getTemplateCodeBlockCssUrl()
+{
+    if (!m_templateCodeBlockCssUrl.isEmpty()) {
+        return m_templateCodeBlockCssUrl;
+    }
+
+    QString cssPath = getCodeBlockStyleConfigFolder() +
+                      QDir::separator() +
+                      m_templateCodeBlockCss + ".css";
+    QUrl cssUrl = QUrl::fromLocalFile(cssPath);
+    cssPath = cssUrl.toString();
+    if (!QFile::exists(cssUrl.toLocalFile())) {
+        // Specified css not exists.
+        if (m_templateCss == "vnote") {
+            bool ret = outputDefaultCodeBlockCssStyle();
+            if (!ret) {
+                // Use embedded file.
+                cssPath = "qrc" + c_defaultCodeBlockCssFile;
+            }
+        } else {
+            setTemplateCodeBlockCss("vnote");
+            return getTemplateCodeBlockCssUrl();
+        }
+    }
+
+    qDebug() << "use template code block css:" << cssPath;
+    return cssPath;
+}
+
 QString VConfigManager::getEditorStyleUrl()
 {
     QString mdhlPath = getStyleConfigFolder() + QDir::separator() + m_editorStyle + ".mdhl";
@@ -775,20 +867,6 @@ QString VConfigManager::getEditorStyleUrl()
 
 }
 
-const QString &VConfigManager::getTemplateCss() const
-{
-    return m_templateCss;
-}
-
-void VConfigManager::setTemplateCss(const QString &p_css)
-{
-    if (m_templateCss == p_css) {
-        return;
-    }
-    m_templateCss = p_css;
-    setConfigToSettings("global", "template_css", m_templateCss);
-}
-
 const QString &VConfigManager::getEditorStyle() const
 {
     return m_editorStyle;