V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FlyingBackscratc
V2EX  ›  程序员

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

  •  
  •   FlyingBackscratc · 255 天前 · 1828 次点击
    这是一个创建于 255 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求:

    1. 有 text 格式的字符串源码(例如##Helloworld
    2. 希望在 div 里显示渲染后的 markdown
    3. 项目目前是 html 单文件,希望项目可以直接在 html headers 里引用,不需要 npm 安装
    7 条回复    2024-03-01 06:02:40 +08:00
    kamal
        1
    kamal  
       254 天前   ❤️ 2
    [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
        2
    shuxhan  
       254 天前   ❤️ 1
    https://github.com/markedjs/marked
    https://github.com/sindresorhus/github-markdown-css
    我一般是这两个库搭配使用,支持 html 引入,前者解析 md 语法,后者给标签加样式
    jixiaopeng
        3
    jixiaopeng  
       254 天前
    我有一个 nodejs ,express,ejs ,渲染的 md 系统,你可以看看,https://github.com/huanghanzhilian/h-blog
    bugcreator
        4
    bugcreator  
       254 天前
    liuhai233
        6
    liuhai233  
       254 天前
    ## 用户:
    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
        7
    FlyingBackscratc  
    OP
       254 天前
    @shuxhan
    @kamal
    两位都提到了 markedjs/marked 项目,试了一下确实满足需求,多谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1102 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:30 · PVG 07:30 · LAX 15:30 · JFK 18:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.