{"id":16486045,"url":"https://github.com/roziscoding/shiki-renderer-canvas","last_synced_at":"2025-07-18T11:05:46.040Z","repository":{"id":105785089,"uuid":"472397772","full_name":"roziscoding/shiki-renderer-canvas","owner":"roziscoding","description":"A Canvas renderer for Shiki that works on the browser or in Node.js","archived":false,"fork":false,"pushed_at":"2022-06-13T19:38:26.000Z","size":335,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-10T18:27:30.709Z","etag":null,"topics":["canvas","shiki","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://nodejs.com/package/shiki-renderer-canvas","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roziscoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-21T15:27:35.000Z","updated_at":"2022-09-21T13:24:28.000Z","dependencies_parsed_at":"2023-03-18T14:27:23.452Z","dependency_job_id":null,"html_url":"https://github.com/roziscoding/shiki-renderer-canvas","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/roziscoding/shiki-renderer-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roziscoding%2Fshiki-renderer-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roziscoding%2Fshiki-renderer-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roziscoding%2Fshiki-renderer-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roziscoding%2Fshiki-renderer-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roziscoding","download_url":"https://codeload.github.com/roziscoding/shiki-renderer-canvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roziscoding%2Fshiki-renderer-canvas/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265746436,"owners_count":23821653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","shiki","syntax-highlighting"],"created_at":"2024-10-11T13:28:10.375Z","updated_at":"2025-07-18T11:05:45.993Z","avatar_url":"https://github.com/roziscoding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"shiki-renderer-canvas\n---\n\nA Canvas renderer for [Shiki](https://github.com/shikijs/shiki) that works on the browser or in Node.js\n\n\n## Installation\n\n```sh\nnpm i shiki-renderer-canvas\n```\n\n## Usage\n\n### Custom Fonts\n\nYou can use any font you want by passing the `fontFamily` config.\n\nKeep in mind that the font must be accesible to the canvas instance.\n\nFor the browser, the font should be locally installed, and for Node.js, the font should be \n[registered](https://github.com/Automattic/node-canvas/#registerfont) in `node-canvas` **before calling `createCanvas`**.\n\nAn example of how to register a font in Node.js is available at the [generate-sample.ts](./generate-sample.ts) file.\n\n\u003e ⚠️ Important ⚠️: Although `node-canvas` docs say that `registerFont` is only necessary for fonts not installed in\n\u003e the system, I found it to be quite hard to get those to work. The best approach for custom fonts in Node.js is to\n\u003e always register them with `node-canvas`.\n\n### Node.js\n\n```typescript\nimport { createCanvas } from 'canvas'\nimport { writeFile } from 'fs/promises'\nimport * as shiki from 'shiki'\nimport { getCanvasRenderer } from '.'\n\nconst text = `\nimport { createCanvas } from 'canvas'\nimport * as shiki from 'shiki'\ntype Options = any\n\nexport function getCanvasRenderer(_options?: Options) {\n  const canvas = createCanvas(500, 500)\n  const ctx = canvas.getContext('2d')\n\n  return {\n    renderToCanvas(tokens: shiki.IThemedToken[][]) {\n      const [line] = tokens\n      const [token] = line\n\n      ctx.strokeStyle = token.color!\n      ctx.fillText(token.content, 0, 0)\n\n      ctx.stroke()\n\n      return canvas.toBuffer()\n    }\n  }\n}\n`.trim()\n\n;(async () =\u003e {\n  const canvas = createCanvas(500, 500)\n  const highlighter = await shiki.getHighlighter({ theme: 'dracula' })\n  const tokens = highlighter.codeToThemedTokens(text, 'typescript')\n  const renderer = getCanvasRenderer(canvas)\n  const buffer = renderer.renderToCanvas(tokens).toBuffer()\n  await writeFile('image.png', buffer)\n})()\n```\n\n\n### Browser\n\n```typescript\nimport * as shiki from 'shiki'\nimport { getCanvasRenderer } from './renderer/index'\nimport './style.css'\n\nconst canvas = document.querySelector\u003cHTMLCanvasElement\u003e('#canvas')\nconst codeEl = document.querySelector\u003cHTMLTextAreaElement\u003e('#code')\nconst tokensEl = document.querySelector\u003cHTMLTextAreaElement\u003e('#tokens')\nconst drawPaddingLinesEl = document.querySelector\u003cHTMLInputElement\u003e('#drawBox')\nconst fontSizeEl = document.querySelector\u003cHTMLInputElement\u003e('#fontSize')\n\nif (!canvas) throw new Error('no canvas element')\nif (!codeEl) throw new Error('no code element')\nif (!tokensEl) throw new Error('no tokens element')\nif (!drawPaddingLinesEl) throw new Error('no drawBox element')\nif (!fontSizeEl) throw new Error('no fontSize element')\n\nshiki.setCDN('https://unpkg.com/shiki/')\nconst highlighter = await shiki.getHighlighter({ theme: 'dracula' })\n\nconst render = async () =\u003e {\n  const code = codeEl.value.trim()\n\n  const tokens = highlighter.codeToThemedTokens(code, 'typescript')\n\n  tokensEl.value = JSON.stringify(tokens, null, 2)\n\n  const renderer = getCanvasRenderer(canvas, {\n    drawPaddingLines: drawPaddingLinesEl.checked,\n    fontSize: parseInt(fontSizeEl.value, 10)\n  })\n  renderer.renderToCanvas(tokens)\n}\n\ncodeEl.addEventListener('keyup', render)\ndrawPaddingLinesEl.addEventListener('change', render)\nfontSizeEl.addEventListener('change', render)\n\nrender()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froziscoding%2Fshiki-renderer-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froziscoding%2Fshiki-renderer-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froziscoding%2Fshiki-renderer-canvas/lists"}