Markstream Vue

If you load KaTeX via CDN and want KaTeX rendering in a Web Worker (no bundler / optional peer not installed), inject a CDN-backed worker: import { createKaTeXWorkerFromCDN , setKaTeXWorker } from 'markstream-vue' const { worker } = createKaTeXWorkerFromCDN ( { mode : 'classic' , // UMD builds used by importScripts() inside the worker katexUrl : 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js' , mhchemUrl : 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js' , } ) if ( worker ) setKaTeXWorker ( worker ) If you load Mermaid via CDN and want off-main-thread parsing (used by progressive Mermaid rendering), inject a Mermaid parser worker: import { createMermaidWorkerFromCDN , setMermaidWorker } from 'markstream-vue' const { worker } = createMermaidWorkerFromCDN ( { // Mermaid CDN builds are commonly ESM; module worker is recommended. mode : 'module' , workerOptions : { type : 'module' } , mermaidUrl : 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.e

// plugins/markstream-vue.client.ts import { defineNuxtPlugin } from '#app' import MarkdownRender from 'markstream-vue' import 'markstream-vue/index.css' export default defineNuxtPlugin ( ( nuxtApp ) => { nuxtApp . vueApp . component ( 'MarkdownRender' , MarkdownRender ) } ) Then use <MarkdownRender :content="md" /> in your pages.

SSR / Worker usage (deterministic output) Pre-parse Markdown on the server or in a worker and render typed nodes on the client: // server or worker import { getMarkdown , parseMarkdownToStructure } from 'markstream-vue' const md = getMarkdown ( ) const nodes = parseMarkdownToStructure ( '# Hello\n\nThis is parsed once' , md ) // send `nodes` JSON to the client Warning: parseMarkdownToStructure defaults to streamParse: 'auto' : compatible md instances use md.stream.parse for non-final top-level parses and retain the latest source/token cache. Final one-shot parses use the regular parser unless you pass { streamParse: true } ; pass { streamParse: false } to opt out. If you reuse one md instance for unrelated one-shot documents, pass { final: true } or { streamParse: false } . const nodes = parseMarkdownToStructure ( source , md , { final : true } ) When MarkdownRender parses its own content , it intentionally defaults parseOptions.streamParse to true so streaming parses use md.stream.par

Host open source projects in public GitHub repositories, accessible via web or command line. Public repositories are accessible to anyone at GitHub.com. Uh oh! There was an error while loading. Please reload this page .

Keep projects secure by automatically opening pull requests to update vulnerable dependencies and keep them up to date. Uh oh! There was an error while loading. Please reload this page .

Use execution minutes with GitHub Actions to automate your software development workflows. Write tasks and combine them to build, test, and deploy any code project on GitHub. Uh oh! There was an error while loading. Please reload this page .

Host your own software packages or use them as dependencies in other projects. Both private and public hosting available. Uh oh! There was an error while loading. Please reload this page .

Give your developers flexible features for project management that adapts to any team, project, and workflow — all alongside your code. Uh oh! There was an error while loading. Please reload this page .

Get help with most of your GitHub questions and issues in our Community Forum. Uh oh! There was an error while loading. Please reload this page .

With GitHub Codespaces , get an instant dev environment in the cloud, so you can code anywhere on any device. Uh oh! There was an error while loading. Please reload this page .