高亮文章空格

Author: Mr-Python-in-China

src/app/features/article/articleViewer/getProcessor.ts

@@ -6,9 +6,8 @@ import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import remarkMath from './remarkMath.js';
 import remarkRehype from 'remark-rehype';
-import { unified } from 'unified';
+import { PluggableList, unified } from 'unified';
 import rehypeKatex from 'rehype-katex';
-import rehypeHighlight from 'rehype-highlight';
 import rehypeReact from 'rehype-react';
 import { visit } from 'unist-util-visit';
 import parsePath from 'parse-path';
@@ -22,15 +21,19 @@ const rehypeReactConfig: import('hast-util-to-jsx-runtime').Options = {
   jsxs: props.jsxs
 };
 
-export default function getProcessor() {
+export default function getProcessor({
+  remarkPlugins,
+  rehypePlugins
+}: { remarkPlugins?: PluggableList; rehypePlugins?: PluggableList } = {}) {
   return unified()
     .use(remarkParse)
     .use(remarkGfm)
     .use(remarkMath)
+    .use(remarkPlugins || [])
     .use(remarkRehype)
     .use(rehypeKatex)
     .use(hastBilibili)
-    .use(rehypeHighlight)
+    .use(rehypePlugins || [])
     .use(rehypeReact, rehypeReactConfig)
     .freeze();
 }

src/app/features/article/articleViewer/highlightFormatIssue.css

@@ -0,0 +1,3 @@
+.articleViewer-heilightSpace {
+  background-color: #9f9;
+}

src/app/features/article/articleViewer/index.ts

@@ -1,11 +1,49 @@
+import { memo } from 'react';
+import rehypeHighlight from 'rehype-highlight';
+import { visit, SKIP } from 'unist-util-visit';
 import getProcessor from './getProcessor';
 
-import './style.css';
 import 'katex/dist/katex.css';
 import 'highlight.js/styles/base16/tomorrow.css';
-import { memo } from 'react';
+import './style.css';
+import './highlightFormatIssue.css';
+
+function hastHeilightSpace() {
+  const heilightSpaceElement: import('hast').Element = {
+    type: 'element',
+    tagName: 'span',
+    properties: { className: ['articleViewer-heilightSpace'] },
+    children: [{ type: 'text', value: ' ' }]
+  };
+  return (tree: import('hast').Root) =>
+    visit(tree, 'element', element => {
+      if (element === heilightSpaceElement) return SKIP;
+      if (element.tagName === 'code') return SKIP;
+      let className = element.properties['className'];
+      if (typeof className === 'string') className = [className];
+      if (
+        Array.isArray(className) &&
+        (className.includes('katex') || className.includes('katex-display'))
+      )
+        return SKIP;
+      const newChildren = new Array<import('hast').ElementContent>();
+      for (let i of element.children) {
+        if (i.type !== 'text') {
+          newChildren.push(i);
+          continue;
+        }
+        i.value.split(' ').forEach((s, i) => {
+          if (i) newChildren.push(heilightSpaceElement);
+          newChildren.push({ type: 'text', value: s });
+        });
+      }
+      element.children = newChildren;
+    });
+}
 
-const processor = getProcessor();
+const processor = getProcessor({
+  rehypePlugins: [hastHeilightSpace, rehypeHighlight]
+});
 
 const ArticleViewer = memo(function ({
   children: markdown

src/index.tsx

@@ -3,16 +3,12 @@ import { createRoot } from 'react-dom/client';
 
 import App from './app';
 
-declare const RUN: () => boolean;
-
-if (RUN()) {
-  document.body.innerHTML = '';
-  const div = document.createElement('div');
-  document.body.appendChild(div);
-  div.id = 'app';
-  createRoot(div).render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  );
-}
+document.body.innerHTML = '';
+const div = document.createElement('div');
+document.body.appendChild(div);
+div.id = 'app';
+createRoot(div).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

test/articleViewer/testcase/space.md

@@ -0,0 +1 @@
+some text

webpack.config.js

@@ -85,9 +85,6 @@ async function (env, argv) {
       new WebpackBarPlugin(),
       ...(env.analyze ? [new BundleAnalyzerPlugin()] : []),
       new MiniCssExtractPlugin(),
-      new Webpack.DefinePlugin({
-        RUN: () => true
-      })
     ]
   });
 }