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/vue@3.3.4/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.14.5/lib/index.iife.min.js"></script>
<!-- Markdown wasm -->
<script src="https://cdn.jsdelivr.net/npm/@logue/markdown-wasm@1.4.12/dist/markdown.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-markdown-wasm@0.3.12/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) |
-
DEFAULTflag is shorthand forCOLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS -
NO_HTMLflag is shorthand forNO_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.