老哥们求一个前端的最基础 Markdown 渲染项目

258 天前
 FlyingBackscratc

需求:

  1. 有 text 格式的字符串源码(例如##Helloworld
  2. 希望在 div 里显示渲染后的 markdown
  3. 项目目前是 html 单文件,希望项目可以直接在 html headers 里引用,不需要 npm 安装
1831 次点击
所在节点    程序员
7 条回复
kamal
258 天前
[showdown]( https://github.com/showdownjs/showdown)
```JS
var converter = new showdown.Converter(),
text = '# hello, markdown!',
html = converter.makeHtml(text);
```

[marked]( https://github.com/markedjs/marked)
```js
document.getElementById('content').innerHTML =
marked.parse('# Marked in the browser\n\nRendered by **marked**.');
```
shuxhan
257 天前
https://github.com/markedjs/marked
https://github.com/sindresorhus/github-markdown-css
我一般是这两个库搭配使用,支持 html 引入,前者解析 md 语法,后者给标签加样式
jixiaopeng
257 天前
我有一个 nodejs ,express,ejs ,渲染的 md 系统,你可以看看,https://github.com/huanghanzhilian/h-blog
bugcreator
257 天前
liuhai233
257 天前
liuhai233
257 天前
## 用户:
markdown it 怎么在纯 html + js 文件使用

## ChatGPT:
在纯 HTML + JavaScript 文件中使用 Markdown 可以通过引入第三方的 Markdown 渲染库来实现。一个流行的选择是 `marked.js`,它是一个用于解析和渲染 Markdown 的 JavaScript 库。

你可以通过以下步骤在纯 HTML + JavaScript 文件中使用 Markdown:

1. 下载 `marked.js` 或者使用 CDN 进行引入:

```html
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
```

2. 创建一个 `textarea` 元素供用户输入 Markdown 内容,并创建一个用于显示渲染后的 HTML 内容的元素:

```html
<textarea id="markdown-input"></textarea>
<div id="rendered-content"></div>
```

3. 使用 JavaScript 代码来获取 `textarea` 中的 Markdown 内容,并使用 `marked.js` 将其渲染为 HTML:

```html
<script>
document.getElementById('markdown-input').addEventListener('input', function() {
var markdownContent = this.value;
var renderedContent = marked(markdownContent);
document.getElementById('rendered-content').innerHTML = renderedContent;
});
</script>
```

在上述代码中,我们使用 `marked.js` 库将用户输入的 Markdown 内容渲染为 HTML ,并将其显示在页面上。

通过这种方式,你可以在纯 HTML + JavaScript 文件中使用 Markdown ,并实时将其渲染为 HTML 内容。
FlyingBackscratc
257 天前
@shuxhan
@kamal
两位都提到了 markedjs/marked 项目,试了一下确实满足需求,多谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1019309

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX