fix: Fixed code highlighting - show line number, highlight line (#249)

Author: RARgames

core/src/index.tsx

@@ -6,6 +6,7 @@ import rehypeRewrite from 'rehype-rewrite';
 import rehypeAttrs from 'rehype-attr';
 import rehypeRaw from 'rehype-raw';
 import { reservedMeta } from './plugins/reservedMeta';
+import { retrieveMeta } from './plugins/retrieveMeta';
 import { rehypeRewriteHandle, defaultRehypePlugins } from './rehypePlugins';
 
 export * from './preview';
@@ -14,6 +15,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
   const rehypePlugins: PluggableList = [
     reservedMeta,
     rehypeRaw,
+    retrieveMeta,
     [rehypePrism, { ignoreMissing: true }],
     ...defaultRehypePlugins,
     [rehypeRewrite, { rewrite: rehypeRewriteHandle(props.disableCopy ?? false, props.rehypeRewrite) }],

core/src/nohighlight.tsx

@@ -3,6 +3,7 @@ import MarkdownPreview, { type MarkdownPreviewProps, type MarkdownPreviewRef } f
 import { PluggableList } from 'unified';
 import rehypeRewrite from 'rehype-rewrite';
 import { reservedMeta } from './plugins/reservedMeta';
+import { retrieveMeta } from './plugins/retrieveMeta';
 import rehypeAttrs from 'rehype-attr';
 import rehypeRaw from 'rehype-raw';
 import { rehypeRewriteHandle, defaultRehypePlugins } from './rehypePlugins';
@@ -11,6 +12,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
   const rehypePlugins: PluggableList = [
     reservedMeta,
     rehypeRaw,
+    retrieveMeta,
     ...defaultRehypePlugins,
     [rehypeRewrite, { rewrite: rehypeRewriteHandle(props.disableCopy ?? false, props.rehypeRewrite) }],
     [rehypeAttrs, { properties: 'attr' }],

core/src/plugins/reservedMeta.ts

@@ -1,15 +1,12 @@
 import { Plugin } from 'unified';
-import { Root, RootContent, Element } from 'hast';
+import { Root, RootContent } from 'hast';
 import { visit } from 'unist-util-visit';
 
 export interface ReservedMetaOptions {}
 
 export const reservedMeta: Plugin<[ReservedMetaOptions?], Root> = (options = {}) => {
   return (tree) => {
-    visit(tree, (node: Root | RootContent | Element) => {
-      if (node.type === 'element' && node.tagName === 'code' && node.properties && node.properties.meta) {
-        node.properties = { ...node.properties, 'data-meta': String(node.properties.meta) };
-      }
+    visit(tree, (node: Root | RootContent) => {
       if (node.type === 'element' && node.tagName === 'code' && node.data && node.data.meta) {
         node.properties = { ...node.properties, 'data-meta': String(node.data.meta) };
       }

core/src/plugins/retrieveMeta.ts

@@ -0,0 +1,19 @@
+import { Plugin } from 'unified';
+import { Root, RootContent } from 'hast';
+import { visit } from 'unist-util-visit';
+
+export interface RetrieveMetaOptions {}
+
+export const retrieveMeta: Plugin<[RetrieveMetaOptions?], Root> = (options = {}) => {
+  return (tree) => {
+    visit(tree, (node: Root | RootContent) => {
+      if (node.type === 'element' && node.tagName === 'code' && node.properties && node.properties['dataMeta']) {
+        if (!node.data) {
+          node.data = {};
+        }
+        node.data.meta = node.properties['dataMeta'];
+        delete node.properties['dataMeta'];
+      }
+    });
+  };
+};