feat(markdown): extend markdown syntax (#94)

Author: laggage

.vscode/settings.json

@@ -11,7 +11,7 @@
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
     "typescript.tsc.autoDetect": "off",
     "editor.formatOnSave": true,
-    "cSpell.words": ["ASPNETCORE", "fluentui", "iconfont", "ings", "randomstring", "singleline", "tailwindcss"],
+    "cSpell.words": ["ASPNETCORE", "fluentui", "iconfont", "ings", "nbsp", "randomstring", "singleline", "tailwindcss"],
     "json.format.enable": false,
     "eslint.alwaysShowStatus": true,
     "eslint.lintTask.enable": true,

README.md

@@ -20,6 +20,7 @@
 	- [提取图片](#提取图片)
 	- [博文设置面板](#博文设置面板)
 	- [闪存](#闪存)
+	- [markdown语法扩展](#markdown语法扩展)
 - [vscode 版本要求](#vscode-版本要求)
 - [插件设置](#插件设置)
 
@@ -167,6 +168,16 @@
 
 通过本插件发布的闪存, 在尾部会显示一个vscode图标
 
+### markdown语法扩展
+
+本插件可以让vscode中的markdown预览支持博客园中扩展的markdown语法, 您可以通过设置来控制是否要启用此功能
+
+<kbd><img height="550" src="https://img2023.cnblogs.com/blog/35695/202211/35695-20221129171437084-1034144030.png"></kbd>
+
+使用示例:
+
+<kbd><img height="550" src="https://img2023.cnblogs.com/blog/35695/202211/35695-20221129171115024-35740390.png"></kbd>
+
 ## vscode 版本要求
 
 \>=1.62.0

package-lock.json

@@ -34,6 +34,13 @@
     ],
     "main": "./dist/extension.js",
     "contributes": {
+        "markdown.markdownItPlugins": true,
+        "markdown.previewScripts": [
+            "./dist/markdown.js"
+        ],
+        "markdown.previewStyles": [
+            "./dist/assets/styles/highlight-code-lines.css"
+        ],
         "icons": {
             "vscode-cnb-date": {
                 "description": "date",
@@ -426,6 +433,28 @@
                             90,
                             100
                         ]
+                    },
+                    "cnblogsClientForVSCode.markdown.enableEnhancement": {
+                        "order": 6,
+                        "markdownDescription": "启用博客园markdown语法扩展",
+                        "default": true,
+                        "type": "boolean",
+                        "scope": "application"
+                    },
+                    "cnblogsClientForVSCode.markdown.enableFenceQuote": {
+                        "order": 7,
+                        "type": "boolean",
+                        "scope": "application",
+                        "default": true,
+                        "markdownDescription": "博客园markdown语法扩展: 三箭头(`<<<`)栅栏引用\n\n&nbsp;\n\n使用示例:\n\n```markdown\n\n<<<\n一段引用文字\n\n一段引用文字\n<<<\n\n```"
+                    },
+                    "cnblogsClientForVSCode.markdown.enableHighlightCodeLines": {
+                        "order": 8,
+                        "type": "boolean",
+                        "scope": "application",
+                        "default": true,
+                        "editPresentation": "singlelineText",
+                        "markdownDescription": "博客园markdown语法扩展: 代码块指定行高亮\n\n&nbsp;\n\n使用示例:\n\n```markdown\n\n```typescript {1, 3-4}\nconsole.log(1)\nconsole.log(2)\nconsole.log(3)\nconsole.log(4)\nconsole.log(5)\n```\n\n```"
                     }
                 }
             }
@@ -1006,8 +1035,9 @@
         "webpack-cli": "^4.8.0"
     },
     "dependencies": {
-        "@cnblogs-gitlab/markdown-it-presets": "^1.3.1",
+        "@cnblogs/code-highlight-adapter": "^1.7.1",
         "@cnblogs/code-quality": "^2.0.2",
+        "@cnblogs/markdown-it-presets": "^1.6.1",
         "@fluentui/react": "^8.62.4",
         "base64url": "^3.0.1",
         "blob": "^0.1.0",

package.json

@@ -1,7 +1,7 @@
 import { Post } from '../../models/post';
 import { PostFileMapManager } from '../../services/post-file-map';
 import fs from 'fs';
-import { markdownItFactory } from '@cnblogs-gitlab/markdown-it-presets';
+import { markdownItFactory } from '@cnblogs/markdown-it-presets';
 import { blogSettingsService } from '../../services/blog-settings.service';
 import { accountService } from '../../services/account.service';
 import { postCategoryService } from '../../services/post-category.service';
@@ -17,14 +17,14 @@ export namespace postPdfTemplateBuilder {
         const localFilePath = PostFileMapManager.getFilePath(postId);
         postBody = localFilePath ? fs.readFileSync(localFilePath).toString('utf-8') : postBody;
 
-        const md = markdownItFactory({
-            codeHighlight: false,
-            math: true,
-            disableRules: [],
-            html: true,
-        });
-
-        const html = isMarkdown ? md.render(postBody) : postBody;
+        const html = isMarkdown
+            ? markdownItFactory({
+                  codeHighlight: false,
+                  math: true,
+                  disableRules: [],
+                  html: true,
+              }).render(postBody)
+            : postBody;
 
         const buildTagHtml = (): Promise<string> => {
             let html =

src/commands/pdf/post-pdf-template-builder.ts

@@ -11,6 +11,7 @@ import {
 } from '@/services/check-workspace';
 import { EditPostUriHandler } from '@/services/edit-post-uri-handler';
 import { IngsListWebviewProvider } from 'src/services/ings-list-webview-provider';
+import { extendMarkdownIt } from '@/markdown/extend-markdownIt';
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
@@ -27,6 +28,9 @@ export function activate(context: vscode.ExtensionContext) {
     observeConfigurationChange();
     observeWorkspaceFolderChange();
     vscode.window.registerUriHandler(new EditPostUriHandler());
+    return {
+        extendMarkdownIt,
+    };
 }
 
 // this method is called when your extension is deactivated

src/extension.ts

@@ -0,0 +1,11 @@
+import { Settings } from '@/services/settings.service';
+import { HighlightCodeLinesPlugin, MarkdownIt, MultilineBlockquotePlugin } from '@cnblogs/markdown-it-presets';
+
+export const extendMarkdownIt = (md: MarkdownIt) =>
+    md
+        .use(MultilineBlockquotePlugin, {
+            enable: () => Settings.isEnableMarkdownEnhancement && Settings.isEnableMarkdownFenceBlockquote,
+        })
+        .use(HighlightCodeLinesPlugin, {
+            enable: () => Settings.isEnableMarkdownEnhancement && Settings.isEnableMarkdownHighlightCodeLines,
+        });

src/markdown/extend-markdownIt.ts

@@ -0,0 +1,25 @@
+import { HighlightersFactory, HljsHighlighter } from '@cnblogs/code-highlight-adapter';
+
+HighlightersFactory.configCodeHighlightOptions({ enableCodeLineNumber: false });
+
+function highlightLines(this: void) {
+    const bgDefinitionStyleId = 'highlightedLineBackground';
+    if (!document.querySelector(`#${bgDefinitionStyleId}`)) {
+        const style = document.createElement('style');
+        style.id = bgDefinitionStyleId;
+        style.innerHTML = `:root { --highlighted-line-bg: var(--vscode-diffEditor-insertedTextBackground) }`;
+        document.head.append(style);
+    }
+
+    const highlighter = new HljsHighlighter();
+    document.querySelectorAll<HTMLPreElement>('pre[class*="language-"][data-lines-highlight]').forEach(preEl => {
+        const codeEl = preEl.querySelector('code');
+        if (!codeEl) return;
+        if (codeEl.firstChild instanceof HTMLDivElement && codeEl.children.length === 1)
+            codeEl.firstChild.outerHTML = codeEl.firstChild.innerHTML;
+        highlighter.highlightLines(preEl);
+    });
+}
+
+window.addEventListener('vscode.markdown.updateContent', highlightLines);
+highlightLines();

src/markdown/markdown.entry.ts

@@ -21,7 +21,10 @@ export const observeConfigurationChange = () => {
                 refreshPostCategoriesList();
 
             if (ev.affectsConfiguration(`${Settings.prefix}.${Settings.postsListPageSizeKey}`))
-                void refreshPostsList({ queue: true });
+                refreshPostsList({ queue: true }).catch(() => undefined);
+
+            if (ev.affectsConfiguration(`${Settings.prefix}.markdown`))
+                commands.executeCommand('markdown.preview.refresh').then(undefined, () => undefined);
         })
     );
     isTargetWorkspace();

src/services/check-workspace.ts

@@ -63,6 +63,18 @@ export class Settings {
         return isNumber(size) ? size : 30;
     }
 
+    static get isEnableMarkdownEnhancement() {
+        return this.configuration.get<boolean>('markdown.enableEnhancement') ?? true;
+    }
+
+    static get isEnableMarkdownFenceBlockquote() {
+        return this.configuration.get<boolean>('markdown.enableFenceQuote') ?? true;
+    }
+
+    static get isEnableMarkdownHighlightCodeLines() {
+        return this.configuration.get<boolean>('markdown.enableHighlightCodeLines');
+    }
+
     static async setWorkspaceUri(value: Uri) {
         if (!value.fsPath || !(value.scheme === 'file')) throw Error('Invalid uri');