自己写一个Markdown解析器的最简单的html页面,方便gpt回复内容解析成你喜欢的样子

对于编程人员自然知道md,但是普通人估计就这不太清楚这些条条框框是干什么用的了,正好最近给大学写个脚本,类似通过AI批量出题的,通过表格中的课本章节和需求描述,然后批量根据表格中的每行数据调用gpt进行出题,由于gpt回复的虽然是有格式的,但其实是md格式,没办法整理到excel中进行使用,所以就需要md的解析器处理一下,然后就可以带格式复制到表格中用了。

效果如下:

左边输入md内容,右边自动显示解析后的内容,因为这个网页中ctrl+A会导致看的见的内容全部都会复制,为了方便加了一个复制全部解析内容的按钮。

一共就两个文件,一个是解析器的网页html文件,还有一个是md解析的marked插件的js,

一共就这样

解析器的marked.html代码如下:直接保存成.html格式就可以了。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 转换器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            justify-content: space-between;
            margin: 20px;
        }
        textarea {
            width: 45%;
            height: 400px;
            padding: 10px;
            font-size: 16px;
        }
        .output {
            width: 45%;
            height: 400px;
            padding: 10px;
            border: 1px solid #ccc;
            overflow-y: auto;
            background-color: #f9f9f9;
        }
        button {
            margin-top: 10px;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Markdown 转换器</h1>

    <div class="container">
        <!-- Markdown 输入框 -->
        <textarea id="markdown-input" placeholder="在这里输入Markdown格式的内容..."></textarea>

        <!-- 解析后的 HTML 显示区域 -->
        <div id="html-output" class="output"></div>
    </div>

    <!-- 复制按钮 -->
    <div style="text-align: right;margin-right: 300px">
    <button id="copy-button">复制解析后的内容</button>
    </div>

    <!-- 引入本地 marked.min.js 文件 -->
    <script src="marked.min.js"></script>

    <script>
        const input = document.getElementById('markdown-input');
        const output = document.getElementById('html-output');
        const copyButton = document.getElementById('copy-button');

        // 当用户输入时,实时将 Markdown 转换为 HTML
        input.addEventListener('input', function() {
            const markdownText = input.value;
            const htmlContent = marked.parse(markdownText); // 使用 marked.js 解析 Markdown
            output.innerHTML = htmlContent;
        });

        // 点击按钮时复制解析后的内容
        copyButton.addEventListener('click', function() {
            // 创建一个临时元素来保存解析后的 HTML
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = output.innerHTML;  // 获取解析后的 HTML 内容
            document.body.appendChild(tempTextArea);
            tempTextArea.select();  // 选中内容
            document.execCommand('copy');  // 执行复制命令
            document.body.removeChild(tempTextArea);  // 移除临时元素
            alert('解析后的内容已复制到剪贴板!');  // 提示用户
        });
    </script>

</body>
</html>

至于marked.min.js文件正常网络好的情况下cdn直接引用就可以,但是很多教育网等等不太好用,下载的话在这个地址 https://cdn.jsdelivr.net/npm/marked/marked.min.js

html的文件的下载地址在这 marked.html

相关推荐
x原力觉醒43 分钟前
uniapp跨域问题,在开发环境中配置
javascript·vue.js·uni-app
理想不理想v1 小时前
【问答】浏览器如何编译前端代码?
前端·javascript·css·html
王哲晓1 小时前
第十五章 Vue工程化开发及Vue CLI脚手架
前端·javascript·vue.js
揽月凡尘1 小时前
typescript webpack 库打包发布
javascript·webpack·typescript
爱编程的小金1 小时前
React-query vs. 神秘新工具:前端开发的新较量
前端·javascript·react.js·http·前端javascript
qq_427506081 小时前
react轮播图示例
前端·javascript·react.js
江-月*夜2 小时前
uniapp vuex 搭建
android·javascript·uni-app
喝旺仔la2 小时前
Django知识进阶
前端·html
啊QQQQQ3 小时前
linux:回车换行+进度条+git理解与使用以及如何解决免密码push问题
开发语言·javascript·ecmascript