marked.js

Marked是一个Markdown解析引擎。

vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		html, body, #editor {

		  margin: 0;

		  height: 100%;

		  font-family: 'Helvetica Neue', Arial, sans-serif;

		  color: #333;

		}

		textarea, #editor div {

		  display: inline-block;

		  width: 49%;

		  height: 100%;

		  vertical-align: top;

		  box-sizing: border-box;

		  padding: 0 20px;

		}

		textarea {

		  border: none;

		  border-right: 1px solid #ccc;

		  resize: none;

		  outline: none;

		  background-color: #f6f6f6;

		  font-size: 14px;

		  font-family: 'Monaco', courier, monospace;

		  padding: 20px;

		}

		code {

		  color: #f66;

		}

	</style>

</head>

<body>

	<div id="editor">

	  <textarea :value="input" @input="update"></textarea>

	  <div v-html="compiledMarkdown"></div>

	</div>

	<script type="text/javascript" src="marked.js"></script>

	<script type="text/javascript" src="vue.js"></script>

	<script type="text/javascript">

		new Vue({

		  el: '#editor',

		  data: {

		    input: '# hello'

		  },

		  computed: {

		    compiledMarkdown: function () {

		      return marked(this.input, { sanitize: true })

		    }

		  },

		  methods: {

		    update: function(e) {

		    	this.input = e.target.value;

		    }

		  }

		})

	</script>

</body>

</html>

10分钟写一个markdown编辑器的更多相关文章

  1. CBrother脚本10分钟写一个拯救“小霸王服务器”的程序

    CBrother脚本语言10分钟写一个拯救“小霸王服务器”的程序 到了一家新公司,接手了一坨c++服务器代码,到处内存泄漏,这服务器没有数据库,挂了后重启一下就好了,公司就这么凑活着用了几年了,定时重 ...

  2. 10分钟实现Typora(markdown)编辑器

    本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表,使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基 ...

  3. 10款流行的Markdown编辑器，总有一款适合你

    摘要:作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用. 作为一个开源 ...

  4. [转载]10款流行的Markdown编辑器

    10款流行的Markdown编辑器 http://www.csdn.net/article/2014-05-05/2819623 作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!M ...

  5. 10 分钟实现一个自己的server监控器

    需求 近期须要给自己的server加入监控器.目的是监控server的内存.CPU.磁盘占用率,资源占用率过高的话能给自己发个提醒.当前主流的平台通常会提供邮件.短息.甚至会提供微信提醒,只是这类提醒 ...

  6. 推荐一个markdown编辑器-Haroopad

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个markdown编辑器-Haroopad.

  7. Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验

    (一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...

  8. Vue实现一个MarkDown编辑器

    Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大 ...

  9. 10分钟搭建一个小型网页(python django)(hello world！)

    10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...

随机推荐

  1. angularJS（5）

    angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...

  2. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  3. 记一次Redis被攻击的事件

    最近几个月非常忙,所以很少有时间写博客,这几天终于闲了一些,于是就在整理平时的一些笔记.恰好这几天Redis服务器发生了问题,就记录一下. 我司有两款分别是2B和2C的App,类似于阿里旺旺的卖家版和 ...

  4. CSharpGL(9)解析OBJ文件并用CSharpGL渲染

    CSharpGL(9)解析OBJ文件并用CSharpGL渲染 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo ...

  5. 从EF的使用中探讨业务模型能否脱离单一存储层完全抽象存在

    上次赶时间,就很流水账地写了上次项目对EF的一次实践应用模式,因为太长了,也没能探讨太多,所以再继续扩展. 这次想探讨的是,实体,如果作为类似于领域模型的业务模型存在,它的数据能否来自不同的数据源.这 ...

  6. ABP源码分析三十六：ABP.Web.Api

    这里的内容和ABP 动态webapi没有关系.除了动态webapi,ABP必然是支持使用传统的webApi.ABP.Web.Api模块中实现了一些同意的基础功能,以方便我们创建和使用asp.net w ...

  7. ABP框架 - 启动配置

    文档目录 本节内容: 配置ABP 替换内置服务 配置模块 为一个模块创建配置 ABP在启动时,提供基础框架和模型来配置和模块化. 置ABP 在预初始化事件中进行配置,示例: kid1412注:XmlL ...

  8. Lind.DDD.Plugins~插件模式的集成

    回到目录 对于Lind.DDD这个敏捷框架来说,插件也是其中的一个亮点,所有被认为是插件(Plugins)的模块都会继承自IPlugins这个标示接口,它在程序启动时会找到所有插件,并通过autofa ...

  9. [大数据之Yarn]——资源调度浅学

    在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了.比如,一个公司拥有一个几十个节点的hadoop集群,a项目组要进行一个计算任务,b项目 ...

  10. Android colors资源文件常用的颜色

    <?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...