html實現輸入Markdown實時預覽

本文轉載自查看原文 2021-03-08 00:58 255

一、使用方法：

1.markdown處理庫：https://cdn.jsdelivr.net/npm/marked/marked.min.js

2.<textarea></textarea>、oninput事件

二、實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MarkdownEdit</title>
<!--    <link rel="stylesheet" href="css/demo.css">-->
    <script src="js/marked.min.js"></script>
</head>
<body>
<div style="margin: 12px">
    <header>MarkdownEdit</header>
</div>
<div style="width: 1200px;margin: 0 auto">
    <div class="left" >
        <textarea id="text" style="width: 580px;height:1200px;float: left" oninput="document.getElementById('marked').innerHTML = marked(document.getElementById('text').value)"></textarea>
    </div>
    <div class="right" style="width: 580px;height:1200px;float: right" id="marked">

    </div>
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Sublime下MarkDown插件實現編輯和實時預覽並轉換成HTML格式 vscode 實時預覽 markdown Notepad++中實現Markdown語法高亮與實時預覽 Sublime 配置 Markdown，並實時預覽 Sublime寫MarkDown實時預覽 ubuntu vim markdown 實時預覽 Linux下markdown編輯軟件 — retext 支持實時預覽，存為pdf、html、ODT等 Sublime Text3 + Markdown + 實時預覽 Sublime Text 3下安裝MarkDown並實時預覽 vscode 實時預覽編輯markdown 插件 Markdown Preview Enhanced