由于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. 安卓微信对接H5微信支付出现“商家参数有误,请联系商家解决”的问题处理

    最近遇到客户在对接我们微信支付的时候,一些商家反馈在用户支付的过程中会出现报错,出错的截图如下: 查看微信官方文档如下:https://pay.weixin.qq.com/wiki/doc/api/H ...

  2. opencv::KMeans方法概述

    KMeans方法概述 . 无监督学习方法 . 分类问题,输入分类数目,初始化中心位置 . 硬分类方法,以距离度量 . 迭代分类为聚类    //---------- //迭代算法的终止准则 //--- ...

  3. clientHeight获取屏幕可视化高度

    此时你设置后会发现屏幕的高度出现滚动条 那是因为body有8个外边距 设置margin:0就可以解决 watch可以区监听data中的数据,只要data中的数据发生变化 就可以执行watch中的函数了 ...

  4. MySQL内连接、左连接、右连接的使用以及区别

    首先先建两个表,student表和score表 select * from student; student表数据如下: select * from score; score表数据如下:    可以看 ...

  5. 处理海量数据的grep、cut、awk、sed 命令

    grep.cut.awk.sed 常常应用在查找日志.数据.输出结果等等,并对我们想要的数据进行提取. 通常grep,sed命令是对行进行提取,cut跟awk是对列进行提取 处理海量数据之grep命令 ...

  6. LG4782 「模板」2-SAT问题 2-SAT

    问题描述 LG4782 题解 对于一个限制条件,建边如下: 如果\(x,-x\)在同一个强联通分量里,则不行,否则可以 构造方案:输出\(bel_i<bel_{i+n}\) \(\mathrm{ ...

  7. MySQL字段类型 约束

    目录 MySQL存储引擎 非空约束 字段类型 整形类型INT TINYINT 浮点类型float 字符类型char varchar 日期类型 枚举集合 约束条件 主键 自增 unsigned无符号 z ...

  8. 【洛谷1829】 [国家集训队] Crash的数字表格(重拾莫比乌斯反演)

    点此看题面 大致题意: 求\(\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\). 推式子 不会莫比乌斯反演的可以先去看这篇博客:初学莫比乌斯反演. 反演题显然就是推式子啊~~~ 考 ...

  9. Git分支的介绍及Gitlab的部署

    Git分支介绍几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.Git 处理分支的方式可谓是难以置信的轻量,创建新分支这一操作几乎能在 ...

  10. [LeetCode] 263. Ugly Number 丑陋数

    Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...