MarkDown 预览工具

我是李君子 · 发表于 2024-5-7 23:10:28

前言
----使用地址----
https://love-kogasa.github.io/FJST/Md.html
----MoreTool----
https://love-kogasa.github.io/FJST/
欢迎投稿( 投稿和使用都是免费的 ) / 加群讨论

Let's go
懒得写详细教程了，直接上源码各位

<!doctype>
<html>
<head>
<title>Md预览工具</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
</head>
<body style="padding: 5%;background-color: #9A9;">
<nav class="demo imponent">
<a class="brand">
<h2><xmp></> MarkDown Writer</xmp></h2>
</a>
</nav>
<script>function conv( text, out ){
out.innerHTML = marked.parse( text );
}</script>
<br>
<br>
<div class="flex two">
<div>
<article class="card" style="box-shadow: 0px 5px 1em #AAA;">
<header>
<h1>InPut Markdown</h1>
</header>
<footer>
<div contenteditable id="inp" placeholder="Some text" style="border: 1px solid #AAA; padding: 2%; border-radius: 5px;"></div>
<button onclick="conv( inp.innerText, outp )">预览</button>
</footer>
</article>
</div>
<div>
<article class="card" style="box-shadow: 0px 5px 1em #AAA;">
<header>
<h1>OutPut Markdown</h1>
</header>
<footer>
<div id="outp">Some text</div>
</footer>
</article>
</div>
</div>
</body>
</html>

复制代码

借物表
Marked.Js jsMd文本转换器
PicnicCss 一个好看轻量级Css库
没别的啦

结语
Marked太好用啦

展示
Screenshot_2024-05-07-20-10-52-572_com.android.browser.jpg

[其他] MarkDown 预览工具