高亮缺少的空格

Author: Mr-Python-in-China

assets/needSpaceBetweenPunctuationAndChineseChar.svg

@@ -5,3 +5,7 @@ declare module '*.webp' {
   const path: string;
   export default path;
 }
+declare module '*.svg' {
+  const path: string;
+  export default path;
+}

imports.d.ts

@@ -3,6 +3,17 @@ import rehypeReact from 'rehype-react';
 import rehypeHighlight from 'rehype-highlight';
 import { visit, SKIP } from 'unist-util-visit';
 import luoguMarkdownProcessor from 'lg-markdown-processor';
+import { Element, ElementContent, Text } from 'hast';
+
+function checkClass(element: Element, target: string) {
+  let className = element.properties['className'];
+  if (className === undefined || className === null) return false;
+  if (typeof className === 'number' || typeof className === 'boolean')
+    element.properties['className'] = className = className.toString();
+  if (typeof className === 'string')
+    element.properties['className'] = className = className.split(' ');
+  return className.includes(target);
+}
 
 const rehypeReactConfig: import('hast-util-to-jsx-runtime').Options = {
   Fragment: 'article',
@@ -14,40 +25,84 @@ const rehypeReactConfig: import('hast-util-to-jsx-runtime').Options = {
 
 export default function getProcessor() {
   return luoguMarkdownProcessor({
-    rehypePlugins: [hastHeilightSpace, rehypeHighlight]
+    rehypePlugins: [hastHighlightSpace, rehypeHighlight]
   })
     .use(rehypeReact, rehypeReactConfig)
     .freeze();
 }
-function hastHeilightSpace() {
-  const heilightSpaceElement: import('hast').Element = {
+
+namespace CharTest {
+  export const ChineseChar = /\p{sc=Han}/u;
+  export const Punctuation = /\p{P}/u;
+  export const EnglishChar = /[a-zA-Z]/;
+}
+namespace HighlightElement {
+  export const Space: Element = {
     type: 'element',
     tagName: 'span',
-    properties: { className: ['articleViewer-heilightSpace'] },
+    properties: { className: ['articleHighlight', 'Space'] },
     children: [{ type: 'text', value: ' ' }]
   };
+  export const NeedSpaceBetweenEnglishCharAndChineseChar: Element = {
+    type: 'element',
+    tagName: 'span',
+    properties: {
+      className: [
+        'articleHighlight',
+        'NeedSpaceBetweenPunctuationAndChineseChar'
+      ]
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {},
+        children: []
+      }
+    ]
+  };
+}
+function hastHighlightSpace() {
   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'))
-      )
+      if (checkClass(element, 'katex') || checkClass(element, '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 });
+      if (checkClass(element, 'articleHighlight')) return SKIP;
+      const tmp = element.children
+        .flatMap<Exclude<ElementContent, Text> | string>(child =>
+          child.type === 'text' ? Array.from(child.value) : child
+        )
+        .flatMap<Exclude<ElementContent, Text> | string>((child, idx, arr) => {
+          if (typeof child !== 'string') return child;
+          if (child === ' ') return HighlightElement.Space;
+          const prevElement = idx !== 0 ? arr[idx - 1] : undefined;
+          if (
+            typeof prevElement === 'string' &&
+            ((CharTest.ChineseChar.test(prevElement) &&
+              CharTest.EnglishChar.test(child)) ||
+              (CharTest.EnglishChar.test(prevElement) &&
+                CharTest.ChineseChar.test(child)))
+          )
+            return [
+              HighlightElement.NeedSpaceBetweenEnglishCharAndChineseChar,
+              child
+            ];
+          return child;
         });
+      element.children = [];
+      const chars = new Array<string>();
+      for (const child of tmp) {
+        if (typeof child === 'string') chars.push(child);
+        else {
+          if (chars.length > 0) {
+            element.children.push({ type: 'text', value: chars.join('') });
+            chars.length = 0;
+          }
+          element.children.push(child);
+        }
       }
-      element.children = newChildren;
+      if (chars.length > 0)
+        element.children.push({ type: 'text', value: chars.join('') });
     });
 }

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

@@ -1,3 +1,17 @@
-.articleViewer-heilightSpace {
-  background-color: #9f9;
+.articleHighlight.Space {
+  background-color: #00ff2d;
+}
+.articleHighlight.NeedSpaceBetweenPunctuationAndChineseChar {
+  position: relative;
+  display: inline-block;
+  width: 2px;
+  > :first-child {
+    position: absolute;
+    left: -2px;
+    top: -18px;
+    width: 6px;
+    height: 24px;
+    background-image: url(assets/needSpaceBetweenPunctuationAndChineseChar.svg);
+    background-size: 100% 100%;
+  }
 }

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

@@ -42,18 +42,19 @@ a:hover {
   font-weight: bold;
   text-align: center;
   text-decoration: none;
-}
-.username-badge {
-  display: inline-block;
-  padding: 0 0.5em;
-  box-sizing: border-box;
-  font-weight: 400;
-  line-height: 1.5;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 2px;
-  color: white;
-  font-size: 12px;
+  gap: 4px;
+  > .username-badge {
+    display: inline-block;
+    padding: 0 0.5em;
+    box-sizing: border-box;
+    font-weight: 400;
+    line-height: 1.5;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 2px;
+    color: white;
+    font-size: 12px;
+  }
 }
 .errorDiv {
   height: 100%;

src/app/style.css

@@ -21,21 +21,16 @@ export function UserName({ children }: { children: UserSummary }) {
         color: UsernameColor[children.color as keyof typeof UsernameColor]
       }}
     >
-      <>{children.name}</>
-      {children.ccfLevel > 2 && (
-        <span style={{ marginLeft: '4px' }}>
-          <CcfLevelSvg level={children.ccfLevel} />
-        </span>
-      )}
+      <span>{children.name}</span>
+      {children.ccfLevel > 2 && <CcfLevelSvg level={children.ccfLevel} />}
       {children.badge && (
         <span
           className="username-badge"
           style={{
             backgroundColor:
               UsernameColor[children.color as keyof typeof UsernameColor],
             borderColor:
-              UsernameColor[children.color as keyof typeof UsernameColor],
-            marginLeft: '4px'
+              UsernameColor[children.color as keyof typeof UsernameColor]
           }}
         >
           {children.badge}

src/app/utils.tsx

@@ -55,6 +55,7 @@ function MarkdownTestComponent() {
             overflowY: 'auto',
             overflowX: 'hidden'
           }}
+          className="articleViewer"
         >
           <ArticleViewer>{markdownText}</ArticleViewer>
         </div>

test/articleViewer/index.tsx

@@ -0,0 +1 @@
+中文English 中文 English

test/articleViewer/testcase/format.md

@@ -3,46 +3,29 @@
 import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import Base from '../../webpack.config.base.js';
 
 const dirname = import.meta.dirname;
 
-export default {
-  mode: 'development',
-  entry: path.join(dirname, 'index.tsx'),
-  plugins: [
+/**
+ * @param {Record<string,string|boolean>} env
+ * @param {{ mode: 'production' | 'development' | 'none' | undefined; }} argv
+ * @returns { Promise<import('webpack').Configuration> }
+ */
+export default async function (env, argv) {
+  const base = await Base(env, argv);
+  (base.plugins || (base.plugins = [])).push(
     new HtmlWebpackPlugin({
       filename: 'index.html'
-    }),
-    new MiniCssExtractPlugin()
-  ],
-  devServer: {
+    })
+  );
+  base.devServer = {
     port: 22552,
     static: {
       directory: path.join(dirname, 'testcase'),
       publicPath: '/'
     }
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader'
-      },
-      {
-        test: /\.css$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: { postcssOptions: { plugins: [['postcss-preset-env']] } }
-          }
-        ]
-      }
-    ]
-  },
-  devtool: 'eval-source-map'
-};
+  };
+  base.entry = path.join(dirname, 'index.tsx');
+  return base;
+}

test/articleViewer/webpack.config.js

@@ -0,0 +1,74 @@
+//@ts-check
+
+import { resolve } from 'path';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import terser from 'terser-webpack-plugin';
+import WebpackBarPlugin from 'webpackbar';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+
+/**
+ * @param {Record<string,string|boolean>} env
+ * @param {{ mode: 'production' | 'development' | 'none' | undefined; }} argv
+ * @returns { Promise<import('webpack').Configuration> }
+ */
+export default async function (env, argv) {
+  const mode = argv.mode || 'development';
+  return {
+    mode,
+    devtool: argv.mode === 'development' && 'eval-source-map',
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader'
+        },
+        {
+          test: /\.css$/i,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: { postcssOptions: { plugins: [['postcss-preset-env']] } }
+            }
+          ]
+        },
+        {
+          test: /.(woff2?|eot|ttf|otf)|(webp|svg)$/,
+          type: 'asset/inline'
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.webp', '.svg'],
+      alias: {
+        'luogu-api': resolve('luogu-api-docs', 'luogu-api'),
+        assets: resolve('assets')
+      }
+    },
+    optimization:
+      mode == 'production'
+        ? {
+            minimize: true,
+            usedExports: true,
+            innerGraph: true,
+            minimizer: [
+              new terser({
+                parallel: true,
+                terserOptions: {
+                  format: { comments: false }
+                },
+                extractComments: false
+              }),
+              new CssMinimizerPlugin()
+            ]
+          }
+        : {},
+    plugins: [
+      new WebpackBarPlugin(),
+      ...(env.analyze ? [new BundleAnalyzerPlugin()] : []),
+      new MiniCssExtractPlugin()
+    ]
+  };
+}