antfu / markdown-it-shiki Goto Github PK

View Code? Open in Web Editor NEW

61.0 3.0 14.0 149 KB

Markdown It plugin for Shiki

License: MIT License

TypeScript 100.00%

markdown-it-shiki's Introduction

DEPRECATED

This plugin is no longer maintained. We recommend using Shikiji with markdown-it-shikiji.

markdown-it-shiki

Markdown It plugin for Shiki

Install

npm i -D markdown-it-shiki

Usage

import MarkdownIt from 'markdown-it'
import Shiki from 'markdown-it-shiki'

const md = MarkdownIt()

md.use(Shiki, {
  theme: 'nord'
})

Dark mode

md.use(Shiki, {
  theme: {
    dark: 'min-dark',
    light: 'min-light'
  }
})

Add then these to your CSS

/* Query based dark mode */

@media (prefers-color-scheme: dark) {
  .shiki-light {
    display: none;
  }
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .shiki-dark {
    display: none;
  }
}

/* Class based dark mode */

html.dark .shiki-light {
  display: none;
}

html:not(.dark) .shiki-dark {
  display: none;
}

Highlight lines

md.use(Shiki, {
  highlightLines: true
})

Add these to your CSS

code[v-pre] { 
  display: flex;
  flex-direction: column;
}

.shiki .highlighted {
  background: #7f7f7f20;
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}

Then you can highlight lines in code block.

```js {1-2}
const md = new MarkdownIt()
md.use(Shiki)

const res = md.render(/** ... */)
console.log(res)
```

markdown-it-shiki's People

Contributors

Stargazers

Watchers

Forkers

nickgraffis m4dz yyyanghj kjj6198 privatenumber konnga tani widcardw godliangcy bard flickersoul hirasso secondmanveran

markdown-it-shiki's Issues

Error: `plugin.apply` is not a function

Thanks for the plugin! :D

markdownIt().use(plugin, ...) calls plugin.apply(). But since this plugin doesn't define an apply function, an error is raised. @types/markdown-it doesn't seem to define is it either.

https://github.com/markdown-it/markdown-it/blob/6e2de08a0b03d3d0dcc524b89710ce05f83a0283/lib/index.js#L495-L499

Reproducing:
https://glitch.com/edit/#!/festive-orange-event?path=server.js%3A1%3A0

const markdownIt = require('markdown-it')
const mdShiki = require('markdown-it-shiki')

const mdlib = markdownIt()
        .use(mdShiki, {
            theme: 'nord'
        })

import MarkdownIt from 'markdown-it'
import Shiki from 'markdown-it-shiki'

const md = MarkdownIt()

md.use(Shiki, {
  theme: 'nord'
})

Error text:

/home/aravind/src/avoggu.com/node_modules/markdown-it/lib/index.js:497
  plugin.apply(plugin, args);
         ^

TypeError: plugin.apply is not a function
    at MarkdownIt.use (/home/aravind/src/avoggu.com/node_modules/markdown-it/lib/index.js:497:10)
    at file:///home/aravind/src/avoggu.com/ind.mjs:6:4
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12)

Plugin breaks in 0.6.0, maybe it is resulted from `createRequire` or `worker`

Describe the bug

I tried to use markdown-it and shiki with the template starter vitesse-lite.

[email protected] works fine, but with 0.6.0, it cannot start dev properly. Perhaps it is the problem with createRequire or the worker, but I have no idea why it crashes.

Reproduction

https://github.com/widcardw/mdit-shiki-issue

System Info

$ nr dev
> @ dev /Users/leeocoy/Documents/frontend/md-plugin/mdit-test
> vite --port 3333 --open

failed to load config from /Users/leeocoy/Documents/frontend/md-plugin/mdit-test/vite.config.ts
error when starting dev server:
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined
    at new NodeError (node:internal/errors:371:5)
    at createRequire (node:internal/modules/cjs/loader:1220:11)
    at Function.MarkdownItShiki (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/node_modules/.pnpm/[email protected]/node_modules/markdown-it-shiki/dist/index.js:69:54)
    at MarkdownIt.use (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/node_modules/.pnpm/[email protected]/node_modules/markdown-it/lib/index.js:497:10)
    at Object.markdownItSetup (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/vite.config.ts:75:12)
    at createMarkdown (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-vue-markdown/dist/index.js:85:11)
    at VitePluginMarkdown (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-vue-markdown/dist/index.js:272:25)
    at Object.<anonymous> (/Users/leeocoy/Documents/frontend/md-plugin/mdit-test/vite.config.ts:73:49)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object._require.extensions.<computed> [as .js] (file:///Users/leeocoy/Documents/frontend/md-plugin/mdit-test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-557f29e6.js:63513:24)
 ELIFECYCLE  Command failed with exit code 1.

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Ensure valid HTML with `darkModeThemes`

Clear and concise description of the problem

This is an example of markdown-it's default internal output for fenced code blocks:

<pre>
    <code class="language-shell">...</code>
</pre>

When using markdown-it-shiki with darkModeThemes like so:

theme: {
  dark: "min-dark",
  light: "min-light",
}

...the result looks like this right now:

<pre>
  <code class="language-shell">
    <div class="shiki-container language-shell">
      <pre class="shiki min-dark" style="background-color: #1f1f1f" tabindex="0">
        <code>...</code>
      </pre>
      <pre class="shiki min-light" style="background-color: #ffffff" tabindex="0">
        <code>...</code>
      </pre>
    </div>
  </code>
</pre>

The reason for this is that markdown-it will only skip it's internal <pre> wrapper for fenced code blocks if the top-level element of what the highlight function returns is a <pre> element. From their documentation:

// Highlighter function. Should return escaped HTML,
// or '' if the source string is not changed and should be escaped externaly.
// If result starts with <pre... internal wrapper is skipped.
highlight: function (/str, lang/) { return ''; }

...so since markdown-it-shiki wraps the two <pre> elements in a div, we get nested, redundant and invalid HTML as a result. <pre> tags inside a <pre> tag, a (block) <div> tag inside an (inline) <code> tag.

Alternative

No response

Additional context

No response

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

NextJS运行报错

import MarkdownIt from "markdown-it";
import Shiki from "markdown-it-shiki";
const markdown = new MarkdownIt();
 markdown.use(Shiki, {
   theme: "nord",
 })

您好，在NextJs中使用这个插件之后（将插件引入注释掉之后错误消失），会发生以下错误：

error - ./node_modules/cross-spawn/index.js:3:0
Module not found: Can't resolve 'child_process'
Import trace for requested module:
./node_modules/@pkgr/utils/lib/browser.js
./node_modules/@pkgr/utils/lib/index.js
./node_modules/synckit/lib/index.js
./node_modules/markdown-it-shiki/dist/index.mjs
./constants/markdown.ts
./pages/index.tsx

我猜测可能是因为 shiki在浏览器端无法工作。所以我将 markdown的render函数移动到了服务端，但是这又会造成本地开发的进程的卡死。

Shiki Plugin Fails Outside of Vite Config

Describe the bug

When implementing the plugin outside of the vite config file it throws errors of process, global, __dirname not defined.

When compiling it in the vite plugin, as part of the setup for vite-plugin-vue-markdown or even building in instance as a standalone const it finds the definitions fine.

Here is my code for my composition file:

import Markdown from 'markdown-it'
import Anchor from 'markdown-it-anchor'
import Shiki from 'markdown-it-shiki'

export default function useMarkdown() {
  return Markdown({
    markdownItOptions: {
      html: true,
      linkify: true,
      typographer: true,
    },
    markdownItSetup(md) {
      md.use(Anchor)
      md.use(Shiki, {
        theme: {
          light: JSON.parse('../Shiki/light.json', 'utf-8'),
          dark: JSON.parse('../Shiki/dark.json', 'utf-8'),
        },
      })
    },
  })
}

I get the following error in the Chrome console:

markdown-it-shiki.js?v=7849c658:268 Uncaught (in promise) ReferenceError: process is not defined
    at node_modules/which/which.js (markdown-it-shiki.js?v=7849c658:268:21)
    at __require2 (chunk-TFWDKVI3.js?v=7849c658:18:50)
    at node_modules/cross-spawn/lib/util/resolveCommand.js (markdown-it-shiki.js?v=7849c658:383:17)
    at __require2 (chunk-TFWDKVI3.js?v=7849c658:18:50)
    at node_modules/cross-spawn/lib/parse.js (markdown-it-shiki.js?v=7849c658:500:26)
    at __require2 (chunk-TFWDKVI3.js?v=7849c658:18:50)
    at node_modules/cross-spawn/index.js (markdown-it-shiki.js?v=7849c658:612:17)
    at __require2 (chunk-TFWDKVI3.js?v=7849c658:18:50)
    at markdown-it-shiki.js?v=7849c658:1161:34
node_modules/which/which.js @ markdown-it-shiki.js?v=7849c658:268
__require2 @ chunk-TFWDKVI3.js?v=7849c658:18
node_modules/cross-spawn/lib/util/resolveCommand.js @ markdown-it-shiki.js?v=7849c658:383
__require2 @ chunk-TFWDKVI3.js?v=7849c658:18
node_modules/cross-spawn/lib/parse.js @ markdown-it-shiki.js?v=7849c658:500
__require2 @ chunk-TFWDKVI3.js?v=7849c658:18
node_modules/cross-spawn/index.js @ markdown-it-shiki.js?v=7849c658:612
__require2 @ chunk-TFWDKVI3.js?v=7849c658:18
(anonymous) @ markdown-it-shiki.js?v=7849c658:1161

I attempted to define process in the vite.config

define: {
  process: process
}

Then I received global is not defined, and so on.

Reproduction

Code listed above

System Info

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 224.94 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 9.4.1 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Chrome: 111.0.5563.64
    Firefox: 108.0.1
    Safari: 16.3

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Plugin fails on import

Describe the bug

In a vite project, try to

import Shiki from 'markdown-it-shiki`

and it fails with the following error

Uncaught ReferenceError: process is not defined
    at node_modules/which/which.js (which.js:1:19)
    at __require2 (chunk-FMZQLXEQ.js?v=9cf7f38d:19:50)
    at node_modules/cross-spawn/lib/util/resolveCommand.js (resolveCommand.js:4:15)
    at __require2 (chunk-FMZQLXEQ.js?v=9cf7f38d:19:50)
    at node_modules/cross-spawn/lib/parse.js (parse.js:4:24)
    at __require2 (chunk-FMZQLXEQ.js?v=9cf7f38d:19:50)
    at node_modules/cross-spawn/index.js (index.js:4:15)
    at __require2 (chunk-FMZQLXEQ.js?v=9cf7f38d:19:50)
    at browser.ts:7:19

I have tried importing import * as shiki from 'shiki' directly and it works fine, so I think there is something happening with the plugin itself.

Reproduction

https://stackblitz.com/edit/vitejs-vite-xuekbx?file=src%2FApp.vue

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 8.49 GB / 15.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.2.0 - /usr/bin/node
    Yarn: 1.22.19 - /snap/bin/yarn
    npm: 9.6.7 - ~/node_modules/.bin/npm
  Browsers:
    Chromium: 113.0.5672.126

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Add option to see highlighted lines

Would be great to see highlighted lines as an option as it is now available in shiki to add custom CSS class to specific lines.

markdown-it-shiki/src/index.ts

Lines 73 to 82 in 866cb17

    
           const highlightCode = (code: string, lang: string, theme?: string): string => { 
        
             if (_highlighter) 
        
               return _highlighter.codeToHtml(code, lang || 'text', theme) 
        
             return syncRun('codeToHtml', { 
        
               code, 
        
               theme, 
        
               lang: lang || 'text', 
        
             }) 
        
           }

重复渲染代码块

Describe the bug

相同代码，不同配置导致代码块同时渲染暗夜模式

Reproduction

不知道是不是vue2没有做处理

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM)2 Duo CPU     T7700  @ 2.40GHz
    Memory: 6.16 GB / 24.00 GB
  Binaries:
    Node: 16.16.0 - D:\nodejs\node.EXE
    npm: 8.11.0 - D:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.51)   
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Shiki.getHighlighter() never gets resolved on netlify build

The build fails, I think Shiki is taking too long to resolve.

Simple set up, using node v16.7.0 (npm v7.20.3)

//vite.config.ts

...,
Markdown({
  ...,
  markdownItSetup({
    md.use(Shiki, {
      theme: 'dracula'
    }
  })
})

let me know if anyone has any thoughts!

Currently breaks when bundled

I get a issue when this is bundled that it can't import the worker, I suspect due to this: https://github.com/antfu/markdown-it-shiki/blob/main/src/index.ts#L56

	const highlightCode = (code: string, lang: string, theme?: string): string => {
	if (_highlighter)
	return _highlighter.codeToHtml(code, lang \|\| 'text', theme)

	return syncRun('codeToHtml', {
	code,
	theme,
	lang: lang \|\| 'text',
	})
	}

antfu / markdown-it-shiki Goto Github PK

markdown-it-shiki's Introduction

DEPRECATED

markdown-it-shiki

Install

Usage

Dark mode

Highlight lines

markdown-it-shiki's People

Contributors

Stargazers

Watchers

Forkers

markdown-it-shiki's Issues

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Clear and concise description of the problem

Suggested solution

Alternative

Additional context

Validations

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Describe the bug

相同代码，不同配置导致代码块同时渲染暗夜模式

Reproduction

System Info

Used Package Manager

Validations

Recommend Projects

Recommend Topics

Recommend Org