88250 / lute Goto Github PK
View Code? Open in Web Editor NEW🎼 一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。A structured Markdown engine that supports Go and JavaScript.
Home Page: https://ld246.com/tag/lute
License: Other
🎼 一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。A structured Markdown engine that supports Go and JavaScript.
Home Page: https://ld246.com/tag/lute
License: Other
本地http://notaurl访问
SpinVditorDOM 以下代码后会变为宽松列表
<ul data-tight="true" data-marker="*" data-block="0">
<li data-marker="*"><p>1</p>
<ul data-tight="true" data-marker="*" data-block="0">
<li data-marker="*"><p>2</p></li>
</ul>
</li>
<li data-marker="*">
<p>4
<wbr>
</p>
<ul data-tight="true" data-marker="*" data-block="0"></ul>
<ul data-tight="true" data-marker="*" data-block="0">
<li data-marker="*"><p>3</p></li>
</ul>
</li>
</ul>
ir 模式 HTML, inline html 处理
wysiwyg HTML, inline html , inline math 处理
对最终渲染的 HTML 进行一定程度的 XSS 安全过滤,参考 bluemonday 的 UGC 策略进行实现。
Sanitize
,默认不开启 XSS 安全过滤* ```
1
```
* 1<insert here>
```
2
```
Origin: Vanessa219/vditor#98
10$
-> 10
vditor.lute.HTML2VditorDOM(`<h1>Vditor</h1>
<ul>
<li>foo</li>
<li>bar</li>
</ul>`)
SpinVditorDOM - argument: <ol data-block="0"><li><p>1<wbr></p></li></ol>
log.ts:6 SpinVditorDOM - result: <p data-block="0">1 1<wbr>
</p>
https://www.markdownguide.org/extended-syntax
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.
Indent paragraphs to include them in the footnote.
`{ my code }`
Add as many paragraphs as you like.
@jakekwak Thanks for the proposal
https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}
### 这是一个标题 {#custom-id}
渲染的 HTML:
<h3 id="custom-id">这是一个标题</h3>
测试ping一下
listData
结构在 Node 中直接展开,减少对象分配。
foo
| bar |
| --- |
Fixed by 06b57cc
引入 option.LinkBase 参数:设置链接、图片的基础路径。如果用户在链接或者图片地址中使用相对路径(没有协议前缀且不以 / 开头)并且 LinkBase 不为空则会用该值作为前缀。
比如 LinkBase 设置为 http://domain.com/
,对于 ![foo](bar.png)
则渲染为 <img src="http://domain.com/bar.png" alt="foo" />
[toc] 忽略大小写。
d
如果没写 info str 的话自动探测代码块语言。
textHTML
<pre class="vditor-textarea" placeholder="placeholder" contenteditable="true" spellcheck="false" style="font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols; margin: 0px 1px 0px 0px; height: 462px; overflow: auto; width: 640px; -webkit-box-flex: 1; flex: 1 1 0%; border: 0px; resize: none; padding: 10px 9px 231px 10px; box-sizing: border-box; background-color: rgb(250, 251, 252); outline: none 0px; font-size: medium; line-height: 22px; color: var(--textarea-text-color); border-radius: 0px 0px 3px 3px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: block;"><span>`a`</span></pre>
vditor.lute.HTML2Md(textHTML)
<pre class="vditor-textarea" placeholder="placeholder" contenteditable="true" spellcheck="false" style="font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols; margin: 0px 1px 0px 0px; height: 462px; overflow: auto; width: 640px; -webkit-box-flex: 1; flex: 1 1 0%; border: 0px; resize: none; padding: 10px 9px 231px 10px; box-sizing: border-box; background-color: rgb(250, 251, 252); outline: none 0px; font-size: medium; line-height: 22px; color: var(--textarea-text-color); border-radius: 0px 0px 3px 3px; font-variant-ligatures: no-common-ligatures; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: block;"><span>`a`</span></pre>
隐藏 “www” 子域和 “https://” 标识符说起
[foo]
[foo]: bar
应该保持链接引用和定义的使用方式,不应该转成内联链接。
HTML2Md, HTML2VditorDOM 方法添加图片回调处理
SpinVditorIRDOM - argument: <div class="vditor-toc" data-block="0" data-type="toc-block" contenteditable="false"> <span data-type="toc-h">fdfs1312ff1111</span><br></div><h3 data-block="0" class="vditor-ir__node" data-marker="#"><span class="vditor-ir__marker vditor-ir__marker--heading">### </span>f1<wbr></h3>
log.ts:6 SpinVditorIRDOM - result: <div class="vditor-toc" data-block="0" data-type="toc-block" contenteditable="false">    <span data-type="toc-h">f1<wbr></span><br></div><p data-block="0"></p><h3 data-block="0" class="vditor-ir__node vditor-ir__node--expand" data-marker="#"><span class="vditor-ir__marker vditor-ir__marker--heading">### </span>f1<wbr></h3>
表的格式化应该按最宽的单元格对齐内容
在 CPU 跑满的情况下这个选项会导致性能下降。
SpinVditorDOM - argument: <ol data-tight="true" data-block="0"><li data-marker="2."><p>21<wbr></p></li></ol>
log.ts:6 SpinVditorDOM - result: <ol data-tight="true" start="2" data-block="0"><li data-marker="2.">21<wbr></li></ol>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.