ByteMD 是一个用 Svelte 构建的 Markdown 编辑器组件,由字节跳动开源。它也可以用于其他库/框架,例如 React、Vue 和 Angular。
<script>
与<img onerror>,
无需引入额外的 DOM 清理步骤。有两个组件:Editor
和Viewer
。Editor
顾名思义就是 Markdown 编辑器;Viewer
通常用于显示渲染的 Markdown 结果,无需编辑。
使用组件前,记得导入CSS文件,使样式正确:
import 'bytemd/dist/index.min.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) { this.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 }) })
Svelte 是一个前端 UI 框架。 特性: 解决网站的臃肿危机。Svelte 将你的模板变成快速、轻量级的 vanilla JavaScript。 简单易用。使用你掌握的语言,从可组合、易写的模块中构建应用。 快速而又坚固。编译时静态分析确保浏览器不再需要更多的工作。 API: import * as svelte from 'svelte';const { code, map } = sve
介绍 Wiki: Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 为什么选择 Markdown 它基于纯文本,方便修改和共享; 几乎可以在所有的文本编辑器中编写; 有众多编程语言的实现,
svelte-intellij 是一个 IntelliJ IDEA 的 Svelte 插件。 主要功能包括: 语法高亮 代码格式化 输入助手 Emmet 风格的 Svelte 块缩略 自动完成组件、属性和指令 自动导入组件 组件定义导航 集成调试器
如果您在声明组件时更喜欢基于类的 API,则可以使用官方维护的vue-class-component装饰器: import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template:
本文向大家介绍Markdown 基本格式,包括了Markdown 基本格式的使用技巧和注意事项,需要的朋友参考一下 示例 每种格式类型都与HTML标记相关。 第一个标题指的是<h1>标签,其可视化方式如下: 你好,世界 它的文字强调以下内容=: 或#在文本前添加: 第二个标题指的是<h2>标签,其可视化方式如下: 你好,世界 它的文字强调以下内容-: 或##在文本前添加: (#文本前面的字符数与标
段落 非常自然,一行文字就是一个段落。 比如 这是一个段落。 会被解释成 <p>这是一个段落。</p> 如果你需要另起一段,请在两个段落之间隔一个空行。 这是一个段落。 这是另一个段落。 会解释成 <p>这是一个段落<p> <p>这是另一个段落</p> 不隔一个空行的换行行为,在一些编辑器中被解释为换行,即插入一个<br />标签。对与另外一些编辑器,会被解释为插入一个空格。对于后者,若