feat(antdsite): add highlight line number and show line number of mar…

…kdown extensions.

packages/antdsite/gatsby-browser.js

@@ -1,4 +1,5 @@
 import NProgress from 'nprogress';
+require('prismjs/plugins/line-numbers/prism-line-numbers.css');
 
 export const onClientEntry = () => {
   // Merge default options with user defined options in `gatsby-config.js`

packages/antdsite/gatsby-config.js

@@ -24,7 +24,12 @@ module.exports = {
           {
             resolve: getPlugin('remark-default-class-name')
           },
-          'gatsby-remark-prismjs',
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              inlineCodeMarker: '>>>'
+            }
+          },
           {
             resolve: getPlugin('gatsby-remark-custom-blocks'),
             pluginOptions: finalConfig.markdown.alert

packages/antdsite/src/default-theme/assets/highlight.less

@@ -139,68 +139,68 @@ pre[class*='language-'] {
   top: 0.25rem;
 }
 
-.gatsby-highlight pre[class='language-javascript']::before {
+.gatsby-highlight pre[class*='language-javascript']::before {
   content: 'js';
 }
 
-.gatsby-highlight pre[class='language-js']::before {
+.gatsby-highlight pre[class*='language-js']::before {
   content: 'js';
 }
 
-.gatsby-highlight pre[class='language-jsx']::before {
+.gatsby-highlight pre[class*='language-jsx']::before {
   content: 'jsx';
 }
 
-.gatsby-highlight pre[class='language-graphql']::before {
+.gatsby-highlight pre[class*='language-graphql']::before {
   content: 'GraphQL';
 }
 
-.gatsby-highlight pre[class='language-html']::before {
+.gatsby-highlight pre[class*='language-html']::before {
   content: 'html';
 }
 
-.gatsby-highlight pre[class='language-css']::before {
+.gatsby-highlight pre[class*='language-css']::before {
   content: 'css';
 }
 
-.gatsby-highlight pre[class='language-mdx']::before {
+.gatsby-highlight pre[class*='language-mdx']::before {
   content: 'mdx';
   font-weight: 400;
 }
 
-.gatsby-highlight pre[class='language-shell']::before {
+.gatsby-highlight pre[class*='language-shell']::before {
   content: 'shell';
 }
 
-.gatsby-highlight pre[class='language-sh']::before {
+.gatsby-highlight pre[class*='language-sh']::before {
   content: 'sh';
 }
 
-.gatsby-highlight pre[class='language-bash']::before {
+.gatsby-highlight pre[class*='language-bash']::before {
   content: 'bash';
 }
 
-.gatsby-highlight pre[class='language-yaml']::before {
+.gatsby-highlight pre[class*='language-yaml']::before {
   content: 'yaml';
 }
 
-.gatsby-highlight pre[class='language-markdown']::before {
+.gatsby-highlight pre[class*='language-markdown']::before {
   content: 'md';
 }
 
-.gatsby-highlight pre[class='language-json']::before,
-.gatsby-highlight pre[class='language-json5']::before {
+.gatsby-highlight pre[class*='language-json']::before,
+.gatsby-highlight pre[class*='language-json5']::before {
   content: 'json';
 }
 
-.gatsby-highlight pre[class='language-diff']::before {
+.gatsby-highlight pre[class*='language-diff']::before {
   content: 'diff';
 }
 
-.gatsby-highlight pre[class='language-text']::before {
+.gatsby-highlight pre[class*='language-text']::before {
   content: 'text';
 }
 
-.gatsby-highlight pre[class='language-flow']::before {
+.gatsby-highlight pre[class*='language-flow']::before {
   content: 'flow';
 }

packages/antdsite/src/default-theme/assets/index.less

@@ -22,4 +22,4 @@
 @import './docsearch';
 @import './page-scrollbar';
 @import './search-box';
-@import './custom-md-block';
+@import './markdown-extension';

packages/antdsite/src/default-theme/assets/markdown-extension.less

@@ -0,0 +1,60 @@
+/** 
+ * --------------------------------
+ * Custom markdown block
+ * --------------------------------
+ */
+
+.md-alert.ant-alert {
+  .ant-alert-description {
+    p {
+      margin: 0.3rem 0;
+    }
+  }
+
+  margin-bottom: 16px;
+}
+
+/** 
+ * --------------------------------
+ *  Highlight code line
+ * --------------------------------
+ */
+
+.gatsby-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.66);
+  display: block;
+  margin-right: -1em;
+  margin-left: -1em;
+  padding-right: 1em;
+  padding-left: 0.75em;
+}
+
+/** 
+ * --------------------------------
+ *  Line  Numbers 
+ * --------------------------------
+ */
+
+// Adjust the position of the line numbers
+.gatsby-highlight pre[class*='language-'].line-numbers {
+  padding-left: 2.8em;
+}
+
+// If you only want to use line numbering
+.gatsby-highlight {
+  border-radius: 0.3em;
+}
+.gatsby-highlight pre[class*='language-'].line-numbers {
+  padding-left: 1.8em;
+  overflow: auto;
+}
+.line-numbers .line-numbers-rows {
+  border: none;
+}
+.line-numbers-rows > span:before {
+  padding-right: 0.4rem;
+  padding-left: 0.4rem;
+}
+.line-numbers .line-numbers-rows {
+  padding-top: 1em;
+}

packages/docs/docs/guide/markdown.md

@@ -51,3 +51,91 @@ This is a tip for custom title .
 **See also:**
 
 - [Markdown alert config](../config/#alert)
+
+## Line highlighting in the code block
+
+Enter:
+
+````markdown
+```js{4}
+Export default {
+  Data() {
+    Return {
+      Msg: 'Highlighted!'
+    };
+  }
+};
+```
+````
+
+Output:
+
+```js{4}
+Export default {
+  Data() {
+    Return {
+      Msg: 'Highlighted!'
+    };
+  }
+};
+```
+
+**reference:**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#line-highlighting)
+
+## Display line number
+
+Enter:
+
+````markdown
+```javascript{numberLines:true}{4}
+// In your gatsby-config.js
+Plugins: [
+  {
+    Resolve: `gatsby-transformer-remark`,
+    Options: {
+      Plugins: [`gatsby-remark-prismjs`]
+    }
+  }
+];
+```
+````
+
+Output:
+
+```javascript{numberLines:true}{4}
+// In your gatsby-config.js
+Plugins: [
+  {
+    Resolve: `gatsby-transformer-remark`,
+    Options: {
+      Plugins: [`gatsby-remark-prismjs`]
+    }
+  }
+];
+```
+
+**reference:**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#optional-add-line-numbering)
+
+## Highlight the code in the line
+
+Enter:
+
+```markdown
+I can highlight this code with css syntax: `css>>>.some-class { background-color: red }`
+
+I can highlight this code with js syntax: `js>>>const foo = 'bar';`
+```
+
+Output:
+
+I can highlight this code with css syntax: `css>>>.some-class { background-color: red }`
+
+I can highlight this code with js syntax: `js>>>const foo = 'bar';`
+
+**reference:**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#inline-code-blocks)

packages/docs/docs/zh/guide/markdown.md

@@ -48,6 +48,94 @@
 这是一个自定义标题的提示
 :::
 
-**具体配置参考:**
+**也可以查看:**
 
 - [Markdown alert 配置项](../config/#alert)
+
+## 代码块中的行高亮
+
+输入：
+
+````markdown
+```js{4}
+export default {
+  data() {
+    return {
+      msg: 'Highlighted!'
+    };
+  }
+};
+```
+````
+
+输出：
+
+```js{4}
+export default {
+  data() {
+    return {
+      msg: 'Highlighted!'
+    };
+  }
+};
+```
+
+**参考：**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#line-highlighting)
+
+## 显示行号
+
+输入：
+
+````markdown
+```javascript{numberLines:true}{4}
+// In your gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-transformer-remark`,
+    options: {
+      plugins: [`gatsby-remark-prismjs`]
+    }
+  }
+];
+```
+````
+
+输出：
+
+```javascript{numberLines:true}{4}
+// In your gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-transformer-remark`,
+    options: {
+      plugins: [`gatsby-remark-prismjs`]
+    }
+  }
+];
+```
+
+**参考：**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#optional-add-line-numbering)
+
+## 高亮行内的代码
+
+输入：
+
+```markdown
+我可以用 css 语法高亮这段代码：`css>>>.some-class { background-color: red }`
+
+我可以用 js 语法高亮这段代码：`js>>>const foo = 'bar';`
+```
+
+输出：
+
+我可以用 css 语法高亮这段代码：`css>>>.some-class { background-color: red }`
+
+我可以用 js 语法高亮这段代码：`js>>>const foo = 'bar';`
+
+**参考：**
+
+- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#inline-code-blocks)