feat: support line numbers for code blocks (#311)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
slidevjs · Jul 25, 2021 · 037318f · 037318f
1 parent a1d8896
commit 037318f
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 3 deletions.
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
@@ -45,10 +45,15 @@ const style = computed(() => ({
   width: `${slideWidth}px`,
   transform: `translate(-50%, -50%) scale(${scale.value})`,
 }))
+
+const className = computed(() => ({
+  'select-none': !configs.selectable,
+  'slidev-code-line-numbers': configs.lineNumbers,
+}))
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="{ 'select-none': !configs.selectable }">
+  <div id="slide-container" ref="root" :class="className">
     <div id="slide-content" :style="style">
       <slot />
     </div>

diff --git a/packages/client/styles/code.css b/packages/client/styles/code.css
@@ -30,6 +30,17 @@ html:not(.dark) .shiki-dark {
   @apply h-full;
 }
 
+.slidev-code-line-numbers .slidev-code code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.slidev-code-line-numbers .slidev-code code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600
+}
+
 // revert windicss preflight for katex
 .katex,
 .katex :after,

diff --git a/packages/create-app/template/slides.md b/packages/create-app/template/slides.md
@@ -8,6 +8,8 @@ background: https://source.unsplash.com/collection/94734566/1920x1080
 class: 'text-center'
 # https://sli.dev/custom/highlighters.html
 highlighter: shiki
+# show line numbers in code blocks
+lineNumbers: false
 # some information about the slides, markdown enabled
 info: |
   ## Slidev Starter Template

diff --git a/packages/parser/src/core.ts b/packages/parser/src/core.ts
@@ -244,6 +244,7 @@ export function resolveConfig(headmatter: any, themeMeta: SlidevThemeMeta = {})
     download: false,
     info: false,
     highlighter: themeHightlighter || 'prism',
+    lineNumbers: false,
     colorSchema: themeColorSchema || 'auto',
     routerMode: 'history',
     aspectRatio: 16 / 9,

diff --git a/packages/slidev/node/plugins/markdown-it-shiki.ts b/packages/slidev/node/plugins/markdown-it-shiki.ts
@@ -43,18 +43,23 @@ export function resolveShikiOptions(options: ShikiOptions) {
   }
 }
 
+function trimEndNewLine(code: string) {
+  return code.replace(/\n$/, '')
+}
+
 const MarkdownItShiki: MarkdownIt.PluginWithOptions<ShikiOptions> = (markdownit, options = {}) => {
   const _highlighter: ShikiHighlighter = options!.highlighter!
 
   const { darkModeThemes } = resolveShikiOptions(options!)
 
   markdownit.options.highlight = (code, lang) => {
     if (darkModeThemes) {
+      const trimmed = trimEndNewLine(code)
       const dark = _highlighter
-        .codeToHtml(code, lang || 'text', darkModeThemes.dark)
+        .codeToHtml(trimmed, lang || 'text', darkModeThemes.dark)
         .replace('<pre class="shiki"', '<pre class="slidev-code shiki shiki-dark"')
       const light = _highlighter
-        .codeToHtml(code, lang || 'text', darkModeThemes.light)
+        .codeToHtml(trimmed, lang || 'text', darkModeThemes.light)
         .replace('<pre class="shiki"', '<pre class="slidev-code shiki shiki-light"')
       return escapeVueInCode(`<pre class="shiki-container">${dark}${light}</pre>`)
     }

diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
@@ -142,6 +142,12 @@ export interface SlidevConfig {
    * @default prism
    */
   highlighter: 'prism' | 'shiki'
+  /**
+   * Show line numbers in code blocks
+   *
+   * @default false
+   */
+  lineNumbers: boolean
   /**
    * Force slides color schema
    *

diff --git a/test/__snapshots__/parser.test.ts.snap b/test/__snapshots__/parser.test.ts.snap
@@ -63,6 +63,7 @@ Object {
   "highlighter": "prism",
   "info": false,
   "layout": "cover",
+  "lineNumbers": false,
   "monaco": "dev",
   "remoteAssets": true,
   "routerMode": "history",
@@ -264,6 +265,7 @@ Object {
   },
   "highlighter": "prism",
   "info": false,
+  "lineNumbers": false,
   "monaco": "dev",
   "remoteAssets": true,
   "routerMode": "history",
@@ -418,6 +420,7 @@ Object {
   },
   "highlighter": "prism",
   "info": false,
+  "lineNumbers": false,
   "monaco": "dev",
   "remoteAssets": true,
   "routerMode": "history",