shiki-renderer-pdf

PDF renderer for Shiki

Installation

npm install shiki-renderer-pdf shiki pdf-lib

Usage

import fs from 'node:fs'
import shiki from 'shiki'
import { PDFDocument } from 'pdf-lib'
import { getPdfRenderer, hexToRgb } from 'shiki-renderer-pdf'
;(async () => {
  const highlighter = await shiki.getHighlighter({
    theme: 'nord',
  })

  const pdfRenderer = getPdfRenderer({
    bg: hexToRgb('#2E3440'),
    fontSize: 12,
    lineNumbers: {
      bg: hexToRgb('#151B27'),
      text: hexToRgb('#fff'),
    },
  })

  const code = fs.readFileSync('gen-pdf.js', 'utf-8')

  const tokens = highlighter.codeToThemedTokens(code, 'js')
  const pdfDocument = await PDFDocument.create()

  await pdfRenderer.renderToPdf(tokens, pdfDocument)

  fs.writeFileSync('gen-pdf.js.pdf', await pdfDocument.save(), 'binary')

  console.log('done: gen-pdf.js.pdf')
})()

Result

Read more about what you can do with pdfDocument here.

Custom Fonts

This requires an extra install - @pdf-lib/fontkit.

Please note that the renderer works best with fixed width fonts (the default is Courier).

The renderer expects you to setup the pdfDocument before passing it. await PDFDocument.create() will be enough for most cases, but you may need to do more for features like custom fonts:

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import fs from 'node:fs'
import shiki from 'shiki'
import { PDFDocument } from 'pdf-lib'
import fontkit from '@pdf-lib/fontkit'
import { renderToPdf, hexToRgb } from 'shiki-renderer-pdf'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

;(async () => {
  const highlighter = await shiki.getHighlighter({ theme: 'nord' })

  const pdfDocument = await PDFDocument.create()
  pdfDocument.registerFontkit(fontkit)

  const fontRegular = await pdfDocument.embedFont(
    fs.readFileSync(path.join(__dirname, 'UbuntuMono-Regular.ttf'))
  )
  const fontBold = await pdfDocument.embedFont(
    fs.readFileSync(path.join(__dirname, 'UbuntuMono-Bold.ttf'))
  )
  const fontItalic = await pdfDocument.embedFont(
    fs.readFileSync(path.join(__dirname, 'UbuntuMono-Italic.ttf'))
  )

  const code = fs.readFileSync('gen-pdf.js', 'utf8')
  const tokens = highlighter.codeToThemedTokens(code, 'js')

  await renderToPdf(tokens, pdfDocument, {
    defaultColor: rgb(1, 1, 1),
    bg: hexToRgb('#2E3440'),
    lineNumbers: {
      bg: hexToRgb('#151B27'),
      text: hexToRgb('#fff'),
    },
    fontSize: 14,
    fontMap: {
      regular: fontRegular,
      bold: fontBold,
      italic: fontItalic,
    },
  })
})()

Result

Examples

See the examples for more on how the renderer can be used.