ByteMD is a Markdown editor component built with Svelte. It could also be used in other libraries/frameworks such as React, Vue and Angular.
Note: It is still in development
- Lightweight and framework agnostic: ByteMD is built with Svelte. It compiles to vanilla JS DOM manipulation without importing any UI Framework runtime bundle, which makes it lightweight, and easily adapted to other libraries/frameworks.
- Easy to extend: ByteMD has a plugin system to extend the basic Markdown syntax, which makes it easy to add additional features such as code syntax highlight, math equation and Mermaid flowcharts. You can also write your own plugin if these ones don't meet your needs.
- Secure by default: Cross-site scripting(XSS) attack such as
<script>
and<img onerror>
have been correctly handled by ByteMD. No need to introduce extra DOM sanitize steps. - SSR compatiable: ByteMD could be used in the Server-side rendering(SSR) environment without extra config. SSR is widely used in some cases due to its better SEO and fast time-to-content in slow network connection.
npm install bytemd
# or
yarn add bytemd
There are two components: Editor
and Viewer
. Editor
is the Markdown editor, as the name suggests; Viewer
is commonly used to display rendered Markdown results without editing.
Before using the component, remember to import CSS file to make styles correct:
import 'bytemd/dist/index.css';
<template>
<Editor {value} on:change={handleChange} plugins={[{/* Add plugins here */}]} />
</template>
<script>
import { Editor, Viewer } from 'bytemd'
let value;
function handleChange(e) {
value = e.detail.value
}
</script>
import { Editor, Viewer } from 'bytemd/react';
const App = () => {
const [value, setValue] = useState('');
return (
<Editor
value={value}
onChange={(v) => {
setValue(v);
}}
plugins={
[
// Add plugins here
]
}
/>
);
};
<template>
<Editor :value="value" @change="handleChange" :plugins="plugins" />
</template>
<script>
import { Editor, Viewer } from 'bytemd/vue';
export default {
components: {
Editor,
},
data() {
return {
value: '',
plugins: [
// Add plugins here
],
};
},
methods: {
handleChange(v) {
value = v;
},
},
};
</script>
import { Editor, Viewer } from 'bytemd';
const instance = new Editor({
target: document.body, // DOM to render
props: {
value: '',
plugins: [
// Add plugins here
],
},
});
instance.on('change', (e) => {
const value = e.detail.value;
console.log(value);
// ...
});
ByteMD uses remark and rehype ecosystem to process Markdown. The complete process is as follows:
- The markdown text is parsed to an AST
- The Markdown AST could be manipulated by several remark plugins
- The Markdown AST is transformed to a HTML AST
- The HTML AST is sanitized for security reason
- The HTML AST could be manipulated by several rehype plugins
- The HTML AST is stringified to HTML
- Some extra DOM manipulation after the HTML being rendered
It could also be described as a flowchart:
The 2,5,7 steps are designed for user customization via ByteMD plugin API.
Package | Status | Description |
---|---|---|
@bytemd/plugin-breaks | ByteMD plugin to support breaks | |
@bytemd/plugin-footnotes | ByteMD plugin to support footnotes | |
@bytemd/plugin-highlight | ByteMD plugin to highlight code blocks | |
@bytemd/plugin-highlight-lazy | ByteMD plugin to lazy highlight code blocks | |
@bytemd/plugin-html2md | ByteMD plugin to convert copied HTML to Markdown | |
@bytemd/plugin-image-handler | ByteMD plugin to handle image upload by paste or "drag and drop" | |
@bytemd/plugin-math | ByteMD plugin to support math equation | |
@bytemd/plugin-math-lazy | ByteMD plugin to lazy render math equation | |
@bytemd/plugin-medium-zoom | ByteMD plugin to zoom images like Medium | |
@bytemd/plugin-mermaid | ByteMD plugin to support Mermaid diagram and flowchart | |
@bytemd/plugin-scroll-sync | ByteMD plugin to sync scroll position of edit and preview area | |
@bytemd/plugin-vega | ByteMD plugin to support vega charts |
TODO
MIT