
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
ByteMD is a Markdown editor component built with Svelte. It could also be used in other libraries/frameworks such as React, Vue and Angular.
<script>
and <img onerror>
have been correctly handled by ByteMD. No need to introduce extra DOM sanitize steps.Package | Status | Description |
---|---|---|
bytemd | Svelte/Vanilla JS component | |
@bytemd/react | React component | |
@bytemd/vue | Vue component |
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';
<script>
import { Editor, Viewer } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';
let value;
const plugins = [
gfm(),
// Add more plugins here
];
function handleChange(e) {
value = e.detail.value;
}
</script>
<template>
<Editor {value} {plugins} on:change={handleChange} />
</template>
import { Editor, Viewer } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
const plugins = [
gfm(),
// Add more plugins here
];
const App = () => {
const [value, setValue] = useState('');
return (
<Editor
value={value}
plugins={plugins}
onChange={(v) => {
setValue(v);
}}
/>
);
};
<template>
<Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>
<script>
import { Editor, Viewer } from '@bytemd/vue';
import gfm from '@bytemd/plugin-gfm';
const plugins = [
gfm(),
// Add more plugins here
];
export default {
components: { Editor },
data() {
return { value: '', plugins };
},
methods: {
handleChange(v) {
value = v;
},
},
};
</script>
import { Editor, Viewer } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';
const plugins = [
gfm(),
// Add more plugins here
];
const editor = new Editor({
target: document.body, // DOM to render
props: {
value: '',
plugins,
},
});
editor.on('change', (e) => {
editor.$set({ value: e.detail.value });
});
ByteMD uses remark and rehype ecosystem to process Markdown. The complete process is as follows:
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 | Support breaks | |
@bytemd/plugin-external-links | Open external links in new window | |
@bytemd/plugin-footnotes | Support footnotes | |
@bytemd/plugin-frontmatter | Parse frontmatter | |
@bytemd/plugin-gemoji | Support Gemoji shortcodes | |
@bytemd/plugin-gfm | Support GFM (autolink literals, strikethrough, tables, tasklists) | |
@bytemd/plugin-highlight | Highlight code blocks | |
@bytemd/plugin-highlight-ssr | Highlight code blocks (SSR compatible) | |
@bytemd/plugin-import-html | Import HTML by pasting or dropping | |
@bytemd/plugin-import-image | Import image by pasting or dropping | |
@bytemd/plugin-inject-style | Inject style to markdown body | |
@bytemd/plugin-math | Support math equation | |
@bytemd/plugin-math-ssr | Support math equation (SSR compatible) | |
@bytemd/plugin-medium-zoom | Zoom images like Medium | |
@bytemd/plugin-mermaid | Support Mermaid diagram and flowchart | |
@bytemd/plugin-vega | Support vega charts |
TODO
MIT
FAQs
Hackable Markdown Editor and Viewer
The npm package bytemd receives a total of 3,849 weekly downloads. As such, bytemd popularity was classified as popular.
We found that bytemd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.