自己写一个网页版的Markdown实时编辑器
这几天忙着使用Python+Django+sqlite 搭建自己的博客系统，但是单纯的使用H5的TextArea，简直太挫了有木有。所以，就想模仿一下人家内嵌到网页上的Markdown编辑器，从而让自己的博客系统更加美观一点。
准备
需要什么
Markdown“解释器”：便于处理文本输入以及实时预览
Bootstrap模板 ：建议的H5界面看起来并不好看，所以使用这个框架美化一下。
Sublime Text：当然也可以是记事本或者其他的文本编辑器，这就是我们编写处理逻辑的工具而已。
下载及安装
首先我们需要下载一个“解释器”,到下面的这个网址，点击
markdown-browser-0.6.0-beta1.tgz,完成下载即可。
https://github.com/evilstreak/markdown-js/releases然后下载Bootstrap，为了方便，这里就不下载了，而是使用CDN的方式加载。详细的中文版帮助文档如下http://www.runoob.com/bootstrap/bootstrap-tutorial.html
下载安装Sublime Text，这个可以参考我之前的这篇文章。大家只需要看完怎么安装SublimeText的那部分就足够了。
http://blog.csdn.net/marksinoberg/article/details/50993456
简单版
我们可以在桌面上创建一个文件夹，方便我们进行管理。
然后将刚才下载的那个markdown-js/releases解压咯，把里面的js文件放到这个文件夹下面即可。
然后在创建一个html文件即可，大致可以如下：
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>效果如下：
美化版
这个界面确实是不好看，所以加点美化效果。这里使用的是Bootstrap。
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding:30px">
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>效果如下图：
增强版
这样看着布局什么的也不够好看，所以我就多加了点元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown本地练习</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="padding:30px;background:#e6e6e6;">
<div style="width:100%;padding:7px;">
<button type="button" align="center" class="btn btn-primary btn-lg" style="font-size:30px;">
<span class="glyphicon glyphicon-user"></span> 嗨，左边输入markdown语句，右边实时预览
</button>
</div>
<textarea id="text-input" oninput="this.editer.update()" style="width:50%;height:768px; background:#CBEFD9;font-size:22px;">
</textarea>
<div id="preview" style="float:right;width:50%;height:100%; border:0.5px solid #315;background:#e6e6e6;"></div>
<script src='markdown.js'></script>
<script type="text/javascript">
function Editor(input , preview){
this.update = function(){
preview.innerHTML = markdown.toHTML(input.value);
};
input.editer = this
this.update()
}
var $ = function(id) {
return document.getElementById(id)
}
new Editor($("text-input"),$("preview"))
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>效果如下：
总结
相信大家也看出来了，虽然已经是增强版了，但是这并不是这个小程序的极限。我们可以利用JavaScript以及Bootstrap实现更好看的页面效果。
我们可以在本地练习Markdown的语法，同时也可以将这个代码放到我们的博客系统上，来提升用户体验！
自己写一个网页版的Markdown实时编辑器的更多相关文章
- 用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- 转---写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- 动手写一个简单版的谷歌TPU-矩阵乘法和卷积
谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU.计划实现到行为 ...
- 动手写一个简单版的谷歌TPU-指令集
系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...
- 写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- 手写一个简版 asp.net core
手写一个简版 asp.net core Intro 之前看到过蒋金楠老师的一篇 200 行代码带你了解 asp.net core 框架,最近参考蒋老师和 Edison 的文章和代码,结合自己对 asp ...
- 来，我们手写一个简易版的mock.js吧（模拟fetch && Ajax请求）
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 教你用纯Java实现一个网页版的Xshell（附源码）
前言 最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:Gat ...
随机推荐
- [SDOI2014]重建
题目描述 T国有N个城市,用若干双向道路连接.一对城市之间至多存在一条道路. 在一次洪水之后,一些道路受损无法通行.虽然已经有人开始调查道路的损毁情况,但直到现在几乎没有消息传回. 辛运的是,此前T国 ...
- [SHOI2016]黑暗前的幻想乡
Description 四年一度的幻想乡大选开始了,最近幻想乡最大的问题是很多来历不明的妖 怪涌入了幻想乡,扰乱了幻想乡昔日的秩序.但是幻想乡的建制派妖怪(人类) 博丽灵梦和八云紫等人整日高谈所有妖怪 ...
- POI ZAW
要求一个最短路,担心的就是一条边被正反经过两次. 规定第一步为1到i,并把这条边设为不可经过.然后从i做最短路到1,因为这个过程是不会经历重边的(如果经历了就不是最短路了). 求最短路用SPFA,但常 ...
- 【BZOJ3685】【zkw权值线段树】普通van Emde Boas树
原题传送门 因为马上要开始搞树套树了,所以学了一波权值线段树...毕竟是会点zkw线段树的,所以zkw线段树大法好! 解题思路: 介绍一下权值线段树吧,其实感觉就是线段树的本义,就是你用线段树维护了数 ...
- Codeforces Round #401 (Div. 2)
和FallDream dalao一起从学长那借了个小号打Div2,他切ABE我做CD,我这里就写下CD题解,剩下的戳这里 AC:All Rank:33 小号Rating:1539+217->17 ...
- 初遇 Asp.net MVC 数据库依赖缓存那些事儿
问题背景: 最近做一个非常简单的功能,就是使用ajax请求的方式从服务端请求一段下拉表的数据. 以前也有做过这个功能,只不过这次做这个功能的时候冒出了一个想法: 我请求的这段数据它是一段相对比较固定的 ...
- Tensorflow 免费中文视频教程，开源代码，免费书籍.
Free-Tensorflow Tensorflow 免费中文视频教程,开源代码,免费书籍. 官方教程 官方介绍 https://tensorflow.google.cn/ 安装教程 https:// ...
- Docker学习笔记【一】
[本篇学习笔记来源于 Docker 从入门到实践] 1.什么事Docker?[What] Docker在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等,极大的简化了容器的创建和维护 ...
- Linux 基本bash命令
1.查看文件大小.内存大小.cpu信息.硬盘空间 显示当前目录所有文件大小的命令:ls -lht 内存空间.CPU信息.硬盘空间:htop.top(htop详解参考:http://blog.csdn. ...
- React 关于组件(界面)更新
在最近在学 React , 将组件的UI更新稍微整理了一下.根据业务要求,可能会出现如下的技术实现要求:1.更新自己2.更新子组件3.更新兄弟组件4.更新父组件5.父 call 子 function ...