前台实现markdown编辑器

  • 时间:2018-12-05 22:56 作者:木子昭 来源:木子昭 阅读:189
  • 扫一扫,手机访问
摘要:最终效果如图所示在线演示网站: https://fangyuanxiaozhan.com/demo/md2html实现思路第一步: 获取markdown开源库showdownshowdown的Github地址: https://github.com/showdownjs/showdownshowdo

最终效果如图所示


在线演示网站: https://fangyuanxiaozhan.com/demo/md2html

实现思路

  • 第一步: 获取markdown开源库showdown
  • showdown的Github地址: showdownjs/showdown
  • showdown的cdn:https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js

第二步: 获取markdown样式

推荐李笑来老师的markdonw主题: https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2

  • 将css插入到页面中就可

假如你对css的美观度很有追求, 可以试试下面几款

  • 少数派主题: https://cdn.sspai.com/sspai.css
  • Mweb主题: https://cdn.sspai.com/MWeb.css
  • Github主题: sindresorhus/github-markdown-css
  • typora主题合集下载: https://theme.typora.io/

实现源码:

在线地址(建议pc打开): https://fangyuanxiaozhan.com/demo/md2html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>md转换为html</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script></head><body>    <div style="font-size: 20px;height: 30px; text-align: center;color: #009689; font-weight: bold;">Markdown转换为HTML的Demo</div>    <style>    .markdown-here-wrapper {        font-size: 16px;        line-height: 1.8em;        letter-spacing: 0.1em;    }    pre,    code {        font-size: 14px;        font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;        margin: auto 5px;    }    code {        white-space: pre-wrap;        border-radius: 2px;        display: inline;    }    pre {        font-size: 15px;        line-height: 1.4em;        display: block;         !important;    }    pre code {        white-space: pre;        overflow: auto;        border-radius: 3px;        padding: 1px 1px;        display: block !important;    }    strong,    b {        color: #BF360C;    }    em,    i {        color: #009688;    }    hr {        border: 1px solid #BF360C;        margin: 1.5em auto;    }    p {        margin: 1.5em 5px !important;    }    table,    pre,    dl,    blockquote,    q,    ul,    ol {        margin: 10px 5px;    }    ul,    ol {        padding-left: 15px;    }    li {        margin: 10px;    }    li p {        margin: 10px 0 !important;    }    ul ul,    ul ol,    ol ul,    ol ol {        margin: 0;        padding-left: 10px;    }    ul {        list-style-type: circle;    }    dl {        padding: 0;    }    dl dt {        font-size: 1em;        font-weight: bold;        font-style: italic;    }    dl dd {        margin: 0 0 10px;        padding: 0 10px;    }    blockquote,    q {        border-left: 2px solid #009688;        padding: 0 10px;        color: #777;        quotes: none;        margin-left: 1em;    }    blockquote::before,    blockquote::after,    q::before,    q::after {        content: none;    }    h1,    h2,    h3,    h4,    h5,    h6 {        margin: 20px 0 10px;        padding: 0;        font-style: bold !important;        color: #009688 !important;        text-align: center !important;        margin: 1.5em 5px !important;        padding: 0.5em 1em !important;    }    h1 {        font-size: 24px !important;        border-bottom: 1px solid #ddd !important;    }    h2 {        font-size: 20px !important;        border-bottom: 1px solid #eee !important;    }    h3 {        font-size: 18px;    }    h4 {        font-size: 16px;    }    table {        padding: 0;        border-collapse: collapse;        border-spacing: 0;        font-size: 1em;        font: inherit;        border: 0;        margin: 0 auto;    }    tbody {        margin: 0;        padding: 0;        border: 0;    }    table tr {        border: 0;        border-top: 1px solid #CCC;        background-color: white;        margin: 0;        padding: 0;    }    table tr:nth-child(2n) {        background-color: #F8F8F8;    }    table tr th,    table tr td {        font-size: 16px;        border: 1px solid #CCC;        margin: 0;        padding: 5px 10px;    }    table tr th {        font-weight: bold;        color: #eee;        border: 1px solid #009688;        background-color: #009688;    }    </style>    <style>    #area>table {        width: 100%;        table-layout: fixed;    }    #area table tr td {        margin: 0;        padding: 6px;        border: 0;    }    #md-area {        width: 100%;        height: 600px;        font-size: 18px;        overflow: hidden;        font-weight: bold;        outline: none;    }    #show-area {        height: 600px;        background-color: #FCF6E5;    }    .clearfix:before {        content: "";        display: table;    }    </style>    <script>    function mdSwitch() {        var mdValue = document.getElementById("md-area").value;        var converter = new showdown.Converter();        var html = converter.makeHtml(mdValue);        document.getElementById("show-area").innerHTML = html;    }    </script>    <div id="area">        <table>            <tr>                <td><textarea name="" id="md-area" onkeyup=mdSwitch()></textarea></td>                <td>                    <div id="show-area" class="clearfix"></div>                </td>            </tr>        </table>    </div></body></html>

小结:

  • 记得接触简书, 是由于简书的markdown编辑器很好用
  • 实现一个简单的markdown编辑器并不是一件难事, 把体验做好确是非常不容易的
  • 希望简书能把markdown编辑器的体验, 越做越好
上一篇 目录 已是最后
  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部