Markdown在线编辑器_Rattenking的博客-程序员秘密

技术标签: 【JavaScript】  Rattenking 的前端笔记  markdown  

使用showdown.js实现的Markdown在线编辑器

DEMO效果图

DEMO效果图

引入showdown.js

<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>

HTML代码

<div class="editor-box">
    <p class="head-name">Markdown编辑器</p>
    <textarea class="markdown-editor" id="editor" onkeyup="preview()">### Hello Markdown Edit!</textarea>
</div>  
<div class="preview-box">
    <p class="head-name">预览</p>
    <div class="markdown-preview" id="preview">

    </div>
</div>

CSS代码

body{
   margin: 0;background-color: #000;}
//预览基础样式
blockquote {
    border-left:#eee solid 5px;
    padding-left:20px;
}
ul li {
    line-height: 20px;
}
p{
   line-height: 30px;font-size: 18px;}
pre{
   overflow-x: auto;font-family: '微软雅黑','Rotis','sans-serif';background: #000;width: 100%;border: 1px solid #000;border-radius: 5px;box-sizing: border-box;padding: 10px;}
code {
    color:#fff;
    width: 100%;
    font-size: 16px;
}  
//盒子样式 
.editor-box{
    width:50%;
    background-color:#fff;
    float:left;
    box-sizing:border-box;
    border-right:1px solid #ccc;
}
.preview-box{
    width:50%;
    background-color:#fff;
    float:right;
}
.head-name{
    height:50px;
    line-height:50px;
    text-align:center;
}
.markdown-editor,.markdown-preview{
    width:100%;
    box-sizing:border-box;
    resize:none;
    height:500px;
    padding:10px;
    text-align:left;
    color:#444;
    border:1px solid #aaa;
    display:block;
    overflow:auto;
}

JS代码

(function(win,doc){
    var converter = new showdown.Converter();
    function $(elem){
        return doc.getElementById(elem);
    }
    var preview = win.preview = function(){
        $('preview').innerHTML = converter.makeHtml($('editor').value);
    }
    preview();
})(window,document)

DEMO预览1

DEMO预览2

DEMO下载1

DEMO下载2

其他

我的博客,欢迎交流!

我的程序员秘密,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_38082783/article/details/78538736

智能推荐

css---浏览器默认样式_chen_zan_yu_的博客-程序员秘密

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; /* * 浏览器为了在页面中没有样式时,也可以让页面有一个比较好的显示效果 * 所以为很多的...

JS中字符串截取与php中字符串截取函数总结_流年撕碎青春的博客-程序员秘密

1. JS中关于字符串截取的函数    var stringObj = "123abcstring";    (1) substr()函数        stringObj.substr(start, length): 表示从start位置开始,截取length长度(指定长度)的子字符串。        例如: stringObj.substr(1, 3);       // 返回

aes-128算法加密_加密算法问题-人工智能中的一种约束满意问题_cumt951045的博客-程序员秘密

aes-128算法加密The Crypt-Arithmetic problem in Artificial Intelligence is a type of encryption problem in which the written message in an alphabetical form which is easily readable and understandable is c...

php 面试试题,一份PHP的面试题_轻风慢越的博客-程序员秘密

在PHP中,当前脚本的名称(不包括路径和查询字符串)记录在预定义变量(1)中;而链接到当前页面的URL记录在预定义变量(2)中。echo $_SERVER['PHP_SELF']; echo $_SERVER["HTTP_REFERER"];执行程序段将输出(3)。0在HTTP 1.0中,状态码 401 的含义是(4);如果返回“找不到文件”的提示,则可用 header 函数,其语句为(5)。(4...

example java_Example类的用法_weixin_39890814的博客-程序员秘密

奋斗是表现给自己的Example类是指定构建一个动态的where子句mybatis的配置文件可以使用mybatis-generator工具生成它就可以帮我们生成example类配置网上都有 这里具体说一下里面句子的使用主要说一个属性id1根据名字查询信息@RequestMapping(value = "/get/{name}", method = RequestMethod.GET)@Respon...

微信小程序—两种方式实现上拉加载与下拉刷新_微信小程序上拉加载下一页_Afanbaby的博客-程序员秘密

在列表数据的时候,一般都会有分页,因为如果一次性都加载出来的话,会造成卡顿的现象,浪费用户的流量,所以就会有下拉刷新,上拉加载。这里我们介绍两种实现微信小程序的下拉刷新,上拉加载的实现方式:一、第一种实现方式: 1.官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107通过scro

随便推点

intellij IDE Exception in thread "main" java.lang.OutOfMemoryError: Java heap space_Darkness303的博客-程序员秘密

出现该原因是因为内存不够用了,所以需要 修改java vm 的内存;打开intellij IDE 的 Run 选项2.然后再选择edit configuration 进入到vm options

Apache-Atlas-2.2.0 详细安装步骤_生产环境 apache atlas_great0220的博客-程序员秘密

Apache-Atlas-2.2.0 版本详细安装步骤Apache-Atlas-2.2.0安装环境准备硬件环境软件环境资源下载Maven 安装解压配置环境变量编译 Atlas安装 启动 Atlas解压 apache-atlas-2.2.0-bin.tar.gz修改配置文件(默认使用内置的hbase 和solr 可忽略此步骤)启动Atlas手动启动Hbase手动启动 solr启动 Atlas查看进程访问 AtlasApache-Atlas-2.2.0安装环境准备硬件环境虚拟机:VMware Wor

SpringBoot之属性配置文件详解_傅牧山的博客-程序员秘密

相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷。我们在Spring Boot使用过程中,最直观的感受就是没有了原来自己整合Spring应用时繁多的XML配置内容,替代它的是在pom.xml中引入模块化的Starter POMs,其中各个模块都有自己的默认配置,所以如果不是特殊应用场景,就只需要在application.propertie

phaser小游戏框架学习(一)_ailong3046的博客-程序员秘密

这两天由于项目的需要,所以简单学了一下phaser框架。官网:http://phaser.io/还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅API时,再去英文网站也可以 :https://www.phaser-china.com分享一下入门教程:http://club.phaser-china.com/topic/59899...

电子商务 账户表设计_设计电子商务产品组合:我的帐户页面_daique1908的博客-程序员秘密

与我们设计中的商店组件相关的最后一页是帐户页面。 在这里,您可以查看购买的商品,还可以编辑帐户详细信息。 我的帐户页面有用的资源 如果您想了解有关Sketch的更多信息或为电子商务设计,以下链接将为您提供帮助。 请记住 :您可以通过每月15美元的订阅费访问Envato Tuts +上的所有课程,也可以仅以5美元的价格单独购买每门课程! 关于Envato Tuts +的素描教程...

推荐文章

热门文章

相关标签