@yozora/html-code

This component is for rendering the Yozora Markdown AST node ICode produced by @yozora/tokenizer-code into HTML string.

This component has been built into [@yozora/html-markdown][], you can use it directly.

Install

• npm

  npm install --save @yozora/html-code

• yarn

  yarn add @yozora/html-code

Usage

• Basic:

  import type { ICode } from '@yozora/ast'
  import renderCode from '@yozora/html-code'
  
  const code: ICode = {
    "type": "code",
    "lang": "",
    "meta": "",
    "value": "multiple\nliteral\ntexts"
  }
  renderCode(code)
  // => <code class=\"yozora-code\"><pre>multiple
  //    literal
  //    texts</pre></code>

• Highlighted:

  import type { ICode } from '@yozora/ast'
  import renderCode from '@yozora/html-code'
  
  const code: ICode = {
    "type": "code",
    "lang": "javascript",
    "meta": "",
    "value": "const a = 1\nconst b = 2\nconsole.log(\"a + b =\", a + b)\n"
  }
  renderCode(code)
  // => <code class=\"yozora-code\"><pre><span class=\"token keyword\">const</span> a <span class=\"token operator\">=</span> <span class=\"token number\">1</span>
  //    <span class=\"token keyword\">const</span> b <span class=\"token operator\">=</span> <span class=\"token number\">2</span>
  //    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"a + b =\"</span><span class=\"token punctuation\">,</span> a <span class=\"token operator\">+</span> b<span class=\"token punctuation\">)</span>
  //    </pre></code>

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/react-inline-code
• @yozora/react-code
• @yozora/tokenizer-inline-code
• @yozora/tokenizer-code