marked icon indicating copy to clipboard operation
marked copied to clipboard

highlight add parameters

Open chenyulun opened this issue 2 years ago • 3 comments

Describe the feature A clear and concise description of what you would like. Add code parsing parameters

```html | preview <h1>111111</h1> ``` Why is this feature necessary? A clear and concise description of why.

I want to show code or render code

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

marked.setOptions({
  renderer: new marked.Renderer(),
  highlight(code, lang, params) {
console.log(params) // '| preview'
  }
})

chenyulun avatar Dec 31 '21 09:12 chenyulun

Markdown it support

highlight(str, lang, attrs) {
         console.log(
          '🚀 ~ file: vite.config.ts ~ line 20 ~ highlight ~ attrs',
              attrs
    )
}

chenyulun avatar Dec 31 '21 10:12 chenyulun

The following code can be used instead

```ts | pre const a = 1; ```

marked.use({
  renderer: {
    code(code, infostring: string, escaped) {
      const [lang, ...attrsString] = infostring.split(' | ')
      console.log('lang', lang) // ts
      console.log(attrsString) // [ 'pre' ]
      const language = hljs.getLanguage(lang) ? lang : 'plaintext'
      return `<pre><code class="hljs language-${lang}">${
        hljs.highlight(code, { language }).value
      }</code></pre>`
    }
  }
})

chenyulun avatar Dec 31 '21 10:12 chenyulun

Syntax Highlighting is a part of Markdown Extended: https://www.markdownguide.org/extended-syntax/#syntax-highlighting

panchalkalpesh avatar Feb 05 '22 20:02 panchalkalpesh