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

MarkDown 预览工具

前言
----使用地址----
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太好用啦

展示
页: [1]
查看完整版本: MarkDown 预览工具