Dimer edge shiki

A dimer renderer hook to use shiki for processing code blocks.

Wouldn't it be awesome, if we can make the markdown codeblocks render the same way VScode renders the code? Well, we can. There is no need to use PrismJS or Highlight.js to format the codeblocks in the browser. Now, you have several tools at our disposal to process codeblocks on server side using the same libraries used by VSCode.

This package uses shiki, which in-turn leverages VsCode color schemes and languages to format a piece of code and outputs it in the HTML format. You don't have to write any frontend Javascript or even CSS.

Table of contents

• Installation

Installation

Install the package from npm registry as follows:

npm i dimer-edge-shiki

Then register it is a plugin with dimer-edge

import { Renderer } from 'dimer-edge'
import { ShikiRenderer } from 'dimer-edge-shiki'

const renderer = new Renderer(edge)
const shiki = new ShikiRenderer()

/**
 * You must boot only once
 */
await shiki.useTheme('github-light').boot()

/**
 * Tell dimer-edge to use shiki for rendering codeblocks.
 * All done :)
 */
renderer.use(shiki.handleCodeBlocks)