style: support highlight-line & line-number styles.

Author: jaywcjlove

README.md

@@ -0,0 +1 @@
+core/README.md

core/README.md

@@ -1,6 +1,7 @@
+<!--rehype:ignore:start-->
 React Markdown Preview
 ===
-<!--dividing-->
+<!--rehype:ignore:end-->
 
 [![Build and Deploy](https://github.com/uiwjs/react-markdown-preview/actions/workflows/ci.marster.yml/badge.svg)](https://github.com/uiwjs/react-markdown-preview/actions/workflows/ci.marster.yml)
 [![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-markdown-preview/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-markdown-preview)
@@ -76,6 +77,111 @@ export default function Demo() {
 }
 ```
 
+## highlight line
+
+syntax: <code>```jsx {1,4-5}</code>
+
+```jsx mdx:preview?background=#fff
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+
+const source = `
+\`\`\`js {2}
+function () {
+  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
+}
+\`\`\`
+\`\`\`js {2}
+function () {
+  console.log('hello ')
+}
+\`\`\`
+`;
+
+export default function Demo() {
+  return (
+    <MarkdownPreview
+      source={source}
+      rehypeRewrite={(node, index, parent) => {
+        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
+          parent.children = parent.children.slice(1)
+        }
+      }}
+    />
+  );
+}
+```
+
+## Show Line Numbers
+
+syntax: <code>```jsx showLineNumbers {1,4-5}</code>
+
+```jsx mdx:preview?background=#fff
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+
+const source = `
+\`\`\`js showLineNumbers
+function () {
+  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
+}
+\`\`\`
+\`\`\`js showLineNumbers {2}
+function () {
+  console.log('hello ')
+}
+\`\`\`
+`;
+
+export default function Demo() {
+  return (
+    <MarkdownPreview
+      source={source}
+      rehypeRewrite={(node, index, parent) => {
+        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
+          parent.children = parent.children.slice(1)
+        }
+      }}
+    />
+  );
+}
+```
+
+## Ignore
+
+Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
+
+```jsx mdx:preview?background=#fff
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+
+const source = `
+<!--rehype:ignore:start-->
+Content ignored
+<!--rehype:ignore:end-->
+Some content is ignored, please check the source code
+`;
+
+export default function Demo() {
+  return (
+    <MarkdownPreview
+      source={source}
+      rehypeRewrite={(node, index, parent) => {
+        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
+          parent.children = parent.children.slice(1)
+        }
+      }}
+    />
+  );
+}
+```
+
+xx
+
+```md
+<!--rehype:ignore:start-->Ignored content<!--rehype:ignore:end-->
+```
+
 ### Options Props
 
 ```typescript

core/src/styles/markdown.less

@@ -1053,6 +1053,19 @@ body[data-color-mode*='light'] {
   }
 }
 
+.highlight-line {
+  background-color: var(--color-neutral-muted);
+}
+.code-line.line-number::before {
+  display: inline-block;
+  width: 1rem;
+  text-align: right;
+  margin-right: 16px;
+  color: var(--color-fg-subtle);
+  content: attr(line);
+  white-space: nowrap;
+}
+
 .token.comment,
 .token.prolog,
 .token.doctype,

website/package.json

@@ -23,7 +23,7 @@
     "@kkt/less-modules": "^7.4.7",
     "@kkt/scope-plugin-options": "^7.4.7",
     "kkt": "^7.4.7",
-    "markdown-react-code-preview-loader": "^2.1.4",
+    "markdown-react-code-preview-loader": "^2.1.5",
     "prettier": "^2.8.4",
     "pretty-quick": "^3.1.3",
     "react-test-renderer": "^18.2.0"