由于Webstrom对md文件的预览效果并不理想(与实际网页编译效果差别较大),所以我又改用Sublime进行本地编辑,下面介绍一下怎么搭建环境。

插件安装

整套环境我们就需要两个插件:MarkdownPreviewLiveReload,前者实现md文件的预览,后者实现保存后实时刷新。

  1. Ctrl+Shift+P打开命令面板;

  2. 输入install选择第一个:
     

  3. 输入MarkdownPreview,回车安装;

  4. 输入LiveReload,回车安装;
     

MarkdownPreview使用

  1. Ctrl+Shift+P打开命令面板;

  2. 输入mdp选择第一个:
     

  3. 选择markdown
     

  4. 我这边默认会打开解析后的html文件,再右击选择View in Browser
     

  5. 下面是看到的效果:
     

但是这个时候如果修改了md文件并保存,浏览器中的的页面也不会更新,需要重新刷新页面才能看到效果,这时就要用到LiveReload插件了
 

LiveReload使用

  1. Ctrl+Shift+P打开命令面板;

  2. 输入LiveReload: Enable/disable plug-ins并回车:
     

  3. 选择Simple Reload
     

此时修改你的md文件后保存,浏览器中的的页面也会跟着实时刷新,整体页面效果跟实际网页展示效果一致,爽歪歪~

SublimeText3安装Markdown插件的更多相关文章

  1. Eclipse安装Markdown插件

    Markdown Editor 安装Markdown插件可以实现 .md 和 .txt 文件的 Markdown 语法高亮,并提供 HTML 预览. 因为之前没有安装过别的插件,eclipse上安装插 ...

  2. sublime3 安装markdown插件

    sublime3 安装markdown插件 第一步安装package control 自动安装package control 手动安装package control 安装具体的markdown相关的p ...

  3. Macbook sublime 安装markdown插件

    Sublime Text为3 版本 安装sublime text 插件,需要“***”,不会弄的,就可以移步了. 首先按 command + shift + p 调出安装插件的界面,输入“instal ...

  4. (转载)sublime3安装markdown插件

    原文链接 http://www.jianshu.com/p/335b7d1be39e?utm_source=tuicool&utm_medium=referral 最近升级到了 Sublime ...

  5. 在sublime上安装markdown插件(win10)

    1.markdown插件安装 --ctrl+shift+p --在命令框中选中 package control:install package 选中它  按回车 --在命令框中输入 markdown, ...

  6. Sublime3中如何安装markdown插件支持

    参考文章 Sublime Text下使用markdown的环境搭建和配置 MarkDown生成目录索引 按下键Ctrl+Shift+p调出命令面板,找到Package Control: install ...

  7. Sublimetext3安装Emmet插件步骤

    看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: ...

  8. SublimeText3安装Highlight插件

    本来机子上装的是版本3,试了试网上的教程,比如这个:http://qq920924960.blog.163.com/blog/static/221611034201411247318866/ 结果都不 ...

  9. WebStrom安装Markdown插件

    安装步骤 File→Settings→Plugins→关键字搜索markdown→选择Markdown Navigator→点击Install→出现下载弹窗,等待下载完毕→重启Webstrom 效果预 ...

随机推荐

  1. Jmeter进阶技能-数据库信息,传递参数

    因为项目的原因,假设我们要实现如下要求:从数据库的用户表里获取用户信息,并作为参数全部传递给登录请求,分别完成登录操作. 01Jmeter连接数据库 1.添加JDBC Connection Confi ...

  2. 结对编程-python实现

    目录 软件工程结对项目:Python实现wc程序 结对项目Github地址 项目成员 项目要求 说明 需求 PSP表格 解题思路描述 设计实现 代码组织图 代码分析 代码覆盖率 测试 单元测试 回归测 ...

  3. java引用的强制转型

    在java的面向对象的特性里,父类的引用可以指向子类的实例对象.但是,如果一个引用b(b本身指向了一个对象)想赋值给引用a,b不是a的类型且不是a的子类类型,那么就需要强制转换,并有失败的可能性,这个 ...

  4. [PHP] 项目实践中使用的IOC容器思想

    1.容器的意思就是一个全局变量,里面存了很多对象,如果要用到某个对象就从里面取,前提就是要先把对象放进去2.控制反转就是把自己的控制权交给别人3.这两个结合就是,把自己的控制权交给别人并且创建的对象放 ...

  5. java 获取安全随机字符

    private static final char[] CHAR_32 = new char[] {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', ...

  6. linux (08) nginx入门详解

    一. nginx 入门 nginx 入门学习 web服务器软件 windows IIS服务器 linux nginx apache 收费​lighthttp 公司的技术栈 收费版技术栈 apache ...

  7. logging模块、json序列化数据类型、单例、exception和baseException

    1.logging模块的作用以及应用场景 https://www.cnblogs.com/petrolero/p/9788134.html 2.json序列化可以处理的数据类型有哪些,如何定制支持da ...

  8. Java链接Oracle

    首先在Navicat里面链接Oracle: 连接时老报错:ORA-12505, TNS:listener does not currently know of SID given in connect ...

  9. 【JSP】${pageContext.request.contextPath}

    取出部署的应用程序名或者是当前的项目名称 http://localhost:8080/demo1/a.jsp  ${pageContext.request.contextPath}或<%=req ...

  10. Excel-基本操作

    一.EXCEL的数据类型 1.字符型 2.数值型 3.日期型数据和时间型数据 二.快捷键 ctrl+上下左右健 快速选择某区域  上下左右单元格 ctrl+shift+上下左右 快速选择某个取悦 三. ...