{"id":15130796,"url":"https://github.com/xecades/markdown-it-typst","last_synced_at":"2025-10-23T07:30:43.027Z","repository":{"id":257362662,"uuid":"858070926","full_name":"Xecades/markdown-it-typst","owner":"Xecades","description":"Plugin to transform Typst code to SVG image for markdown-it markdown parser.","archived":false,"fork":false,"pushed_at":"2024-09-18T08:18:22.000Z","size":4222,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-15T20:17:28.220Z","etag":null,"topics":["markdown","markdown-it","typst"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/markdown-it-typst","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Xecades.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-09-16T08:55:17.000Z","updated_at":"2025-01-08T05:37:00.000Z","dependencies_parsed_at":"2024-09-16T09:15:00.061Z","dependency_job_id":"59cd658f-77cb-4154-bf1d-d043c46d9cc6","html_url":"https://github.com/Xecades/markdown-it-typst","commit_stats":null,"previous_names":["xecades/markdown-it-typst"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xecades%2Fmarkdown-it-typst","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xecades%2Fmarkdown-it-typst/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xecades%2Fmarkdown-it-typst/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xecades%2Fmarkdown-it-typst/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Xecades","download_url":"https://codeload.github.com/Xecades/markdown-it-typst/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237793900,"owners_count":19367421,"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":["markdown","markdown-it","typst"],"created_at":"2024-09-26T03:06:21.674Z","updated_at":"2025-10-23T07:30:43.021Z","avatar_url":"https://github.com/Xecades.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markdown-it-typst\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n[![License][license-src]][license-href]\n\nA simple [`typst.ts`](https://github.com/Myriad-Dreamin/typst.ts) wrapper that adds [Typst](https://github.com/typst/typst) support to [`markdown-it`](https://github.com/markdown-it/markdown-it).\n\n**WARNING**: It's NOT recommended to run this plugin on browser side, as it is not optimized for tree-shaking. (See [`typst.ts` Documentation](https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html)) However, utilizing the browser-side version of `typst.ts` is still possible, any PRs regarding this are welcome.\n\n---\n\n## Usage\n\n```bash\nnpm install @xecades/markdown-it-typst\n```\n\n```ts\nimport MarkdownIt from \"markdown-it\";\nimport MarkdownItTypst from \"@xecades/markdown-it-typst\";\n\nconst md = new MarkdownIt().use(MarkdownItTypst);\nconst code = `\n\\`\\`\\`typst\n#set text(font: \"New Computer Modern\")\n\nLet $a$, $b$, and $c$ be the side\nlengths of right-angled triangle.\nThen, we know that:\n$ a^2 + b^2 = c^2 $\n\nProve by induction:\n$ sum_(k=1)^n k = (n(n+1)) / 2 $\n\\`\\`\\`\n`;\n\nconst html = md.render(code);\n\nconsole.log(html);\n\n// Output:\n//\n// \u003cdiv class=\"typst\"\u003e\n// \u003csvg class=\"typst-doc\" [...]\u003e\n// [...]\n// \u003c/svg\u003e\n// \u003c/div\u003e\n```\n\nThe code above will render the following web page (Without additional styling):\n\n![](./images/result1.png)\n\n---\n\n## Features\n\n - **Able to import packages**:\n\n    ~~~md\n    **Normal** *Markdown* code :-)\n\n    ```typst\n    #import \"@preview/cetz:0.2.2\": canvas, draw, tree\n    #canvas(length: 2.5cm, {\n        import draw: *\n        tree.tree(\n            draw-node: (node, ..) =\u003e {\n                if node.content == [] { return none }\n                circle((), radius: .35, stroke: black)\n                content((), [#node.content])\n            },\n            draw-edge: (from, to, pa, child) =\u003e {\n                if child.content == [] { return none }\n                tree.default-draw-edge(from, to, pa, child)\n            },\n            ([15], ([13], [12], [14]), ([17], [16], ([18], [], [18])))\n        )\n    })\n    ```\n    ~~~\n\n    ![](./images/result2.png)\n\n - **Able to import external files**:\n\n    ~~~md\n    ```typst\n    #figure(\n        image(\"./images/cat.png\", width: 200pt),\n        caption: [`/bin/cat`],\n    )\n    ```\n    ~~~\n\n    ![](./images/result3.png)\n\n---\n\n## Options\n\nDefault options:\n\n```ts\nconst md = new MarkdownIt().use(MarkdownItTypst, {\n    identifier: \"typst\",\n    typstWrapper: (code: string) =\u003e\n        \"#set page(width: auto, height: auto, margin: 5pt)\\n\" +\n        \"#set text(size: 18pt)\\n\" +\n        code,\n    svgWrapper: (svg: string) =\u003e '\u003cdiv class=\"typst\"\u003e\\n' + svg + \"\\n\u003c/div\u003e\",\n});\n```\n\n### `identifier`\n\n - Type: `string | string[]`\n - Default: `\"typst\"`\n\nThe language identifier(s) of the Typst code block. Only code blocks with the specified identifiers will be processed.\n\n### `typstWrapper`\n\n - Type: `(code: string) =\u003e string`\n - Default: `(code: string) =\u003e \"#set page(width: auto, height: auto, margin: 5pt)\\n#set text(size: 18pt)\\n\" + code`\n\nTypst code will be wrapped with this function before being compiled.\n\n### `svgWrapper`\n\n - Type: `(svg: string) =\u003e string`\n - Default: `(svg: string) =\u003e '\u003cdiv class=\"typst\"\u003e\\n' + svg + \"\\n\u003c/div\u003e\"`\n\nThe SVG output will be wrapped with this function during rendering.\n\n---\n\n## Examples\n\nThe probably most handy application is to render CeTZ graphs in Markdown:\n\n```ts\nconst md = new MarkdownIt().use(MarkdownItTypst, {\n    typstWrapper: (code: string) =\u003e\n        \"#set page(width: auto, height: auto, margin: 5pt)\\n\" +\n        '#import \"@preview/cetz:0.2.2\": canvas, draw, vector, matrix\\n' +\n        \"#canvas(length: 1cm, {\\n\" +\n        \"    import draw: *\\n\" +\n        code +\n        \"})\",\n    identifier: \"cetz\",\n});\n```\n\n~~~md\nElectromagnetic waves are **transverse** waves:\n\n```cetz\n// Code borrowed from CeTZ: https://typst.app/universe/package/cetz/\n\n// Set up the transformation matrix\nset-transform(matrix.transform-rotate-dir((1, 1, -1.3), (0, 1, .3)))\nscale(x: 1.5, z: -1)\n\ngrid((0,-2), (8,2), stroke: gray + .5pt)\n\n// Draw a sine wave on the xy plane\nlet wave(amplitude: 1, fill: none, phases: 2, scale: 8, samples: 100) = {\n    line(..(for x in range(0, samples + 1) {\n        let x = x / samples\n        let p = (2 * phases * calc.pi) * x\n        ((x * scale, calc.sin(p) * amplitude),)\n    }), fill: fill)\n\n    let subdivs = 8\n    for phase in range(0, phases) {\n        let x = phase / phases\n        for div in range(1, subdivs + 1) {\n            let p = 2 * calc.pi * (div / subdivs)\n            let y = calc.sin(p) * amplitude\n            let x = x * scale + div / subdivs * scale / phases\n            line((x, 0), (x, y), stroke: rgb(0, 0, 0, 150) + .5pt)\n        }\n    }\n}\n\ngroup({\n    rotate(x: 90deg)\n    wave(amplitude: 1.6, fill: rgb(0, 0, 255, 50))\n})\nwave(amplitude: 1, fill: rgb(255, 0, 0, 50))\n```\n~~~\n\n![](./images/result4.png)\n\nThe option `typstWrapper` can serve as a way to inject the necessary imports and setup code for typst. However, it may appear ugly to have such long code in the wrapper function. A better way it to utilize the `#import` directive in the Typst code block:\n\n```ts\nconst md = new MarkdownIt().use(MarkdownItTypst, {\n    typstWrapper: (code: string) =\u003e\n        '#import(\"./preset.typ\")\\n' + code,\n});\n```\n\n---\n\n## License\n\n[MIT](./LICENSE) License © 2024-present [Xecades](https://github.com/xecades)\n\n\u003c!-- Badges from markdown-it-mdc --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/@xecades/markdown-it-typst?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-version-href]: https://www.npmjs.com/package/@xecades/markdown-it-typst\n[npm-downloads-src]: https://img.shields.io/npm/dm/@xecades/markdown-it-typst?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-downloads-href]: https://www.npmjs.com/package/@xecades/markdown-it-typst\n[bundle-src]: https://img.shields.io/bundlephobia/minzip/%40xecades%2Fmarkdown-it-typst?style=flat\u0026colorA=080f12\u0026colorB=1fa669\u0026label=minzip\n[bundle-href]: https://bundlephobia.com/result?p=@xecades/markdown-it-typst\n[license-src]: https://img.shields.io/github/license/xecades/markdown-it-typst.svg?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[license-href]: https://github.com/xecades/markdown-it-typst/blob/main/LICENSE\n[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[jsdocs-href]: https://www.jsdocs.io/package/@xecades/markdown-it-typst\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxecades%2Fmarkdown-it-typst","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxecades%2Fmarkdown-it-typst","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxecades%2Fmarkdown-it-typst/lists"}