LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

marked:一个将Markdown格式转换为富文本HTML格式的完整JavaScript代码函数

admin
2025年8月25日 14:27 本文热度 97

marked 这个开源 JavaScript 库来将 Markdown 转换为 HTML。它功能强大、使用简单,并且可以直接在浏览器中运行。下面是一个完整的单页面 HTML 示例,你只需将代码保存为 .html 文件并在浏览器中打开即可使用。

Markdown 转 HTML 转换器

下面是一个完整的单页面 HTML 应用程序,它使用 marked 库实现 Markdown 到 HTML 的转换,并提供了实时预览功能:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Markdown 转 HTML 转换器 (Marked版)</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css">

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>

    <style>

        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

            max-width: 1200px;

            margin: 0 auto;

            padding: 20px;

            background-color: #f6f8fa;

            color: #24292e;

        }

        .container {

            display: flex;

            flex-direction: column;

            gap: 20px;

        }

        @media (min-width: 768px) {

            .container {

                flex-direction: row;

            }

            .editor-container, .preview-container {

                width: 50%;

            }

        }

        .editor-container, .preview-container {

            display: flex;

            flex-direction: column;

        }

        h1 {

            text-align: center;

            color: #2c3e50;

            margin-bottom: 30px;

        }

        h2 {

            font-size: 1.2em;

            padding-bottom: 10px;

            border-bottom: 1px solid #e1e4e8;

            color: #2c3e50;

        }

        textarea {

            width: 100%;

            height: 300px;

            padding: 14px;

            box-sizing: border-box;

            border: 1px solid #ddd;

            border-radius: 6px;

            resize: vertical;

            font-family: monospace;

           

            line-height: 1.5;

        }

        #preview {

            flex-grow: 1;

            padding: 14px;

            border: 1px solid #ddd;

            border-radius: 6px;

            background-color: white;

            overflow-y: auto;

            height: 300px;

        }

        .github-markdown-body {

            box-sizing: border-box;

            min-width: 200px;

            max-width: 980px;

            margin: 0 auto;

            padding: 20px;

        }

        .button-container {

            display: flex;

            justify-content: center;

            gap: 10px;

            margin-top: 20px;

        }

        button {

            padding: 10px 20px;

            background-color: #2ea44f;

            color: white;

            border: none;

            border-radius: 6px;

            cursor: pointer;

            font-size: 16px;

            transition: background-color 0.2s;

        }

        button:hover {

            background-color: #22863a;

        }

        #copyBtn {

            background-color: #0366d6;

        }

        #copyBtn:hover {

            background-color: #0256b3;

        }

        .instructions {

            background-color: #f8f9fa;

            border-left: 4px solid #0366d6;

            padding: 15px;

            margin-bottom: 20px;

            border-radius: 0 4px 4px 0;

        }

        .error {

            color: #d73a49;

            background-color: #ffebeb;

            padding: 10px;

            border-radius: 4px;

        }

    </style>

</head>

<body>

    <h1>Markdown 转 HTML 转换器 (Marked版)</h1>

    

    <div class="instructions">

        <p><strong>使用说明:</strong> 在左侧输入 Markdown 文本,右侧将实时显示转换后的 HTML 预览。点击"复制 HTML"按钮可将生成的 HTML 代码复制到剪贴板。</p>

    </div>

    

    <div class="container">

        <div class="editor-container">

            <h2>Markdown 输入</h2>

            <textarea id="markdownInput" placeholder="在此输入 Markdown 文本..."># Hello World!


这是一个简单的Markdown示例。


- 列表项一

- 列表项二

- 列表项三


**粗体文本** *斜体文本*


[这是一个链接](https://www.example.com)


> 这是一个引用块


`行内代码` 


```javascript

// 代码块示例

function helloWorld() {

    console.log('Hello, world!');

}

```</textarea>

        </div>

        

        <div class="preview-container">

            <h2>HTML 预览</h2>

            <div id="preview" class="markdown-body"></div>

        </div>

    </div>

    

    <div class="button-container">

        <button id="copyBtn">复制 HTML</button>

        <button id="clearBtn">清空内容</button>

    </div>


    <script>

        // 配置 marked 选项

        marked.setOptions({

            gfm: true, // 启用 GitHub Flavored Markdown

            breaks: true, // 将换行符转换为 <br>

        });


        // 获取DOM元素

        const markdownInput = document.getElementById('markdownInput');

        const preview = document.getElementById('preview');

        const copyBtn = document.getElementById('copyBtn');

        const clearBtn = document.getElementById('clearBtn');


        // 更新预览函数

        function updatePreview() {

            const markdownText = markdownInput.value;

            try {

                // 使用 marked 解析 Markdown

                const rawHtml = marked.parse(markdownText);

                // 使用 DOMPurify 对生成的 HTML 进行消毒

                const cleanHtml = DOMPurify.sanitize(rawHtml);

                preview.innerHTML = cleanHtml;

            } catch (error) {

                console.error('Markdown 解析错误:', error);

                preview.innerHTML = '<p class="error">解析 Markdown 时出现错误。</p>';

            }

        }


        // 初始加载时更新预览

        updatePreview();


        // 输入时实时更新预览(移除防抖功能)

        markdownInput.addEventListener('input', updatePreview);


        // 复制HTML代码到剪贴板

        copyBtn.addEventListener('click', function() {

            const markdownText = markdownInput.value;

            const rawHtml = marked.parse(markdownText);

            const cleanHtml = DOMPurify.sanitize(rawHtml);


            navigator.clipboard.writeText(cleanHtml).then(() => {

                alert('HTML 代码已复制到剪贴板!');

            }).catch(err => {

                console.error('无法复制文本: ', err);

                // 降级方案

                const textArea = document.createElement('textarea');

                textArea.value = cleanHtml;

                document.body.appendChild(textArea);

                textArea.select();

                try {

                    document.execCommand('copy');

                    alert('HTML 代码已复制到剪贴板!');

                } catch (fallbackErr) {

                    console.error('降级复制方案也失败了: ', fallbackErr);

                    alert('复制失败,请手动复制预览内容。');

                }

                document.body.removeChild(textArea);

            });

        });


        // 清空内容

        clearBtn.addEventListener('click', function() {

            if (confirm('确定要清空所有内容吗?')) {

                markdownInput.value = '';

                preview.innerHTML = '';

            }

        });

    </script>

</body>

</html>

功能说明

这个页面提供以下功能:

  1. 实时预览:在左侧输入 Markdown 文本,右侧会实时显示转换后的 HTML 效果。

  2. 复制 HTML:点击"复制 HTML"按钮可以将生成的 HTML 代码复制到剪贴板。

  3. 清空内容:点击"清空内容"按钮可以清除所有输入和预览。

  4. 响应式设计:页面布局会自适应不同屏幕尺寸。

使用的库

  1. marked:一个用 JavaScript 编写的 Markdown 到 HTML 的转换器,支持客户端和服务器端使用。

  2. GitHub Markdown CSS:让渲染的 HTML 具有 GitHub 风格的样式。

使用方法

  1. 将上述代码复制到一个文本编辑器中。

  2. 保存为 .html 文件(例如 markdown-converter.html)。

  3. 在浏览器中打开该文件即可使用。

  4. ​如果你想了解更多关于 marked 库的详细信息,可以访问其 GitHub 页面
    https://cdn.jsdelivr.net/npm/marked/marked.min.js


该文章在 2025/8/25 21:05:31 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved