vue-markdown-wasm

Vue2 and 3 component for markdown-wasm.

Usage

<script setup>
import VueMarkdown from 'vue-markdown-wasm';

/** Demo text */
const input = ref(`# The quick brown fox jumps over the lazy dog.

[Lorem ipsum](https://www.lipsum.com/) dolor sit amet, **consectetur** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);
</script>

<template>
  <vue-markdown v-model="input" />
</template>

See Vue Markdown Wasm Live Preview and source code.

CDN Usage

Load markdown-wasm and vue-demi separately. Please change the version accordingly.

<!-- Vue core -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.iife.min.js"></script>
<!-- Markdown wasm -->
<script src="https://cdn.jsdelivr.net/npm/@logue/[email protected]/dist/markdown.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.iife.min.js"></script>
<script>
  const { createApp } = Vue;
  app.component(VueMarkdown).mount('#app');
</script>

Props

| Props | Type | Default | Information | | --------------- | --------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | | tag | string | article | Markdown wasm wrapping tag. Default is article because it may contain h1 and h2 tags. | | parse-flags | ParseFlags | ParseFlags.DEFAULT | Flags that customize Markdown parsin | | format | <'html' \| 'xhtml'> | xhtml | Select output format | | bytes | boolean | false | result as a Uint8Array | | allow-js-uri | boolean | false | Allow "javascript:" in links | | on-code-block | Function | undefined | Optional callback which if provided is called for each code block. langname holds the "language tag", if any, of the block. |

ParseFlags

| Flags | Description | | ----------------------------- | -------------------------------------------------------- | | COLLAPSE_WHITESPACE | In TEXT, collapse non-trivial whitespace into single ' ' | | LATEX_MATH_SPANS | Enable $ and $$ containing LaTeX equations. | | NO_HTML_BLOCKS | Disable raw HTML blocks. | | NO_HTML_SPANS | Disable raw HTML (inline). | | NO_INDENTED_CODE_BLOCKS | Disable indented code blocks. (Only fenced code works.) | | PERMISSIVE_ATX_HEADERS | Do not require space in ATX headers ( ###header ) | | PERMISSIVE_EMAIL_AUTO_LINKS | Recognize e-mails as links even without <...> | | PERMISSIVE_URL_AUTO_LINKS | Recognize URLs as links even without <...> | | PERMISSIVE_WWW_AUTOLINKS | Enable WWW autolinks (without proto; just 'www.') | | STRIKETHROUGH | Enable strikethrough extension. | | TABLES | Enable tables extension. | | TASK_LISTS | Enable task list extension. | | WIKI_LINKS | Enable wiki links extension. | | UNDERLINE | Enable underline extension (disables '_' for emphasis) |

• DEFAULT flag is shorthand for COLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS
• NO_HTML flag is shorthand for NO_HTML_BLOCKS | NO_HTML_SPANS

Emits

| Emits | Type | Description | | --------- | ---------------------- | -------------------------------- | | @render | string \| Uint8Array | When markdown to html converted. |

LICENSE

©2022-2024 by Logue. Licensed under the MIT License.