@yozora/html-code
v2.0.0-alpha.2
Published
render Yozora Markdown AST node `ICode` into HTML string
Downloads
12
Readme
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>