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

[FlyingBackscratc]

需求：

1. 有 text 格式的字符串源码（例如##Helloworld）
2. 希望在 div 里显示渲染后的 markdown
3. 项目目前是 html 单文件，希望项目可以直接在 html headers 里引用，不需要 npm 安装

[kamal]

[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]

https://github.com/markedjs/marked
https://github.com/sindresorhus/github-markdown-css
我一般是这两个库搭配使用，支持 html 引入，前者解析 md 语法，后者给标签加样式

[jixiaopeng]

我有一个 nodejs ，express,ejs ，渲染的 md 系统，你可以看看，https://github.com/huanghanzhilian/h-blog

[bugcreator]

这个如何？ https://nextra-docs-template.vercel.app/another

[liuhai233]

https://github.com/markdown-it/markdown-it

Demo https://markdown-it.github.io/

[liuhai233]

## 用户:
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]

@shuxhan
@kamal
两位都提到了 markedjs/marked 项目，试了一下确实满足需求，多谢