marked插件在线实时解析markdown的web小工具
访问地址:
github项目:
https://github.com/qcer/MDRush
实现简介:
1、动态数据绑定
借助Vuejs,结合的v-html指令和v-html指令。其核心部分的jade模板代码如下图所示:
对应的vue实例处理逻辑如下图所示:
2、抽屉式侧边栏的实现
原理:
在初始状态下,侧边栏的css属性right定义为负值,数值为侧边栏的宽度值。
同时定义一个class标志,当其class出现特定标识时,更改right的值为0,也即达到将侧边栏显示出来。
绑定点击事件,在点击事件中动态的为侧边栏标签添加class标识。
js代码如下图:
marked插件在线实时解析markdown的web小工具的更多相关文章
- eclipse插件在线发布发布和版本更新(web site) 转
欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jiangxinnju/p/4781259.html GitHub地址: https://github.com/ji ...
- 写了个 Markdown 命令行小工具,希望能提高园友们发文的效率!
写了个 Markdown 命令行小工具,希望能提高园友们发文的效率! 前言 笔者使用 Typora 来编写 Markdown 格式的博文,图片采用的是本地相对路径存储(太懒了不想折腾图床). 时间久了 ...
- 用C语言实现解析简单配置文件的小工具
本文介绍作者写的一个小工具,简单的代码中包含了C语言对字符串的处理技巧,对文本文件的简单解析,二进制文件的数据复制的方法,以及格式化输出文本文件的示例. 工具的输入是如下内容的配置文件: ;资源管理器 ...
- 【WEB小工具】EncodingFilter—设置全局编码
1.我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding("utf-8") 方法来设计编码. public void doGet(Ht ...
- 【WEB小工具】BaseServlet—一个Servlet处理多个请求
package cn.itcast.test.web.servlet; import java.io.IOException; import java.io.PrintWriter; import j ...
- 【WEB小工具】jQuery函数
jQuery-API帮助文档:Click here jQuery简介 jQuery是JavaScript框架,jQuery也是JavaScript代码.使用jQuery要比直接使用JavaScript ...
- CentOS下安装实时检測网络带宽的小工具bmon
首先下载rpmforge-release扩展的rpm包 32位操作系统:wget http://www.sudu.us/Tools/bmon/rpmforge-release-0.3.6-1.el5. ...
- TogetherJS – 酷!在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
- 玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...
随机推荐
- tkinter第四章 输入框,校对
#最简单的输入框 import tkinter as tk root = tk.Tk() e = tk.Entry(root)#输入框的类 e.pack() e.delete(0,tk.END)#把输 ...
- 【★】致全球第一批全帧3D游戏!
图一 游戏片头 致逝去的青春记忆. 好久没人玩Ballance了吧,贴吧里貌似早已冷掉了. 作为一款经典游戏,Ballance的宣传却做得不到位,官方的介绍甚至没能展现出它的全部诱人之处.所以笔者决 ...
- 软件工程(GZSD2015)第三次作业
时间: 2015/4/17-2015/4/23 基本要求: 在之前编写的四则运算程序基础之上做如下改进: 请参照教材Page57:4.2-4.3节中内容,修改原程序,使之符合 "代码风格和设 ...
- 【1414软工助教】团队作业2——需求分析&原型设计 得分榜
题目 团队作业2--需求分析&原型设计 作业提交情况情况 本次作业所有团队都按时提交作业. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 ...
- 扫雷游戏制作过程(C#描述):第二节、界面设计
前言 这里给出教程原文地址. 该项目已经放在github上托管. 扫雷界面设计 界面的设计,首先需要创建一个菜单栏.具体方法在左边找到工具箱窗口,展开其中的菜单和工具栏,找到MenuStrip选项,双 ...
- 201521123060 《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123085 《Java程序设计》 第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123067 《Java程序设计》第13周学习总结
201521123067 <Java程序设计>第13周学习总结 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 Q1. 网络基 ...
- 201521044091 《Java程序设计》第11周学习总结
1. 本章学习总结 2. 书面作业 Q1.1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同 ...
- python 实现文本文件中的数字按序排序(位操作,低内存占用)
文本文件内容 ./txt 3241155299893344 处理代码: import sys a = bytearray(b'') for i in range(100): a.append(or ...