Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including shiki with all npm packages installed. Try it out:

var shiki = require("shiki")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

shiki v0.0.4

shiki

Experimental Onigasm based Syntax Highlighter.

const shiki = require('shiki')

async function go() {
  const themedTokenizer = await shiki.getCodeTokenizer('light_plus')
  const tokenizingInfo = themedTokenizer("console.log('foo');", 'javascript')
  const html = shiki.buildHTML(tokenizingInfo, 'JavaScript')

  console.log(html)
  console.log(JSON.stringify(tokenizingInfo, null, 2))
}

go()

html

<pre class="shiki"><div class="language-id">JavaScript</div><code><span style="color: #267F99">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">'foo'</span><span style="color: #000000">);</span>
</code></pre>

tokenizingInfo

[
  [
    {
      "content": "console",
      "color": "#267F99",
      "explanation": [
        {
          "content": "console",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "support.class.console.js",
              "themeMatches": [
                {
                  "name": "Types declaration and references",
                  "scope": [
                    "meta.return-type",
                    "support.class",
                    "support.type",
                    "entity.name.type",
                    "entity.name.class",
                    "storage.type.cs",
                    "storage.type.generic.cs",
                    "storage.type.modifier.cs",
                    "storage.type.variable.cs",
                    "storage.type.annotation.java",
                    "storage.type.generic.java",
                    "storage.type.java",
                    "storage.type.object.array.java",
                    "storage.type.primitive.array.java",
                    "storage.type.primitive.java",
                    "storage.type.token.java",
                    "storage.type.groovy",
                    "storage.type.annotation.groovy",
                    "storage.type.parameters.groovy",
                    "storage.type.generic.groovy",
                    "storage.type.object.array.groovy",
                    "storage.type.primitive.array.groovy",
                    "storage.type.primitive.groovy"
                  ],
                  "settings": {
                    "foreground": "#267f99"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "content": ".",
      "color": "#000000",
      "explanation": [
        {
          "content": ".",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "punctuation.accessor.js",
              "themeMatches": []
            }
          ]
        }
      ]
    },
    {
      "content": "log",
      "color": "#795E26",
      "explanation": [
        {
          "content": "log",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "support.function.console.js",
              "themeMatches": [
                {
                  "name": "Function declarations",
                  "scope": [
                    "entity.name.function",
                    "support.function"
                  ],
                  "settings": {
                    "foreground": "#795E26"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "content": "(",
      "color": "#000000",
      "explanation": [
        {
          "content": "(",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "meta.brace.round.js",
              "themeMatches": []
            }
          ]
        }
      ]
    },
    {
      "content": "'foo'",
      "color": "#A31515",
      "explanation": [
        {
          "content": "'",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "string.quoted.single.js",
              "themeMatches": [
                {
                  "scope": "string",
                  "settings": {
                    "foreground": "#a31515"
                  }
                }
              ]
            },
            {
              "scopeName": "punctuation.definition.string.begin.js",
              "themeMatches": []
            }
          ]
        },
        {
          "content": "foo",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "string.quoted.single.js",
              "themeMatches": [
                {
                  "scope": "string",
                  "settings": {
                    "foreground": "#a31515"
                  }
                }
              ]
            }
          ]
        },
        {
          "content": "'",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "string.quoted.single.js",
              "themeMatches": [
                {
                  "scope": "string",
                  "settings": {
                    "foreground": "#a31515"
                  }
                }
              ]
            },
            {
              "scopeName": "punctuation.definition.string.end.js",
              "themeMatches": []
            }
          ]
        }
      ]
    },
    {
      "content": ");",
      "color": "#000000",
      "explanation": [
        {
          "content": ")",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "meta.brace.round.js",
              "themeMatches": []
            }
          ]
        },
        {
          "content": ";",
          "scopes": [
            {
              "scopeName": "source.js",
              "themeMatches": []
            },
            {
              "scopeName": "punctuation.terminator.statement.js",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ]
]

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free