html实现输入Markdown实时预览

一、使用方法：

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>

 

posted @ 2021-03-08 00:58  first_code  阅读(841)  评论(0)  编辑  收藏  举报