折腾博客系列之编辑工具的选择

Hexo是静态博客网站,必须先在本地编辑好md文件再推送到网站上去—md文件也就是所谓的用markdown语法编写内容的文件。“工欲善其事,必先利其器”,因此我们需要一个合适的markdown编辑工具,它必须具备以下特点: 1.可导出md文件到本地,并随时进行修改 2.可提供分屏预览,支持同步滚动和定位 3.启动时响应速度快,编辑时渲染速度快

以下是一些工具在markdown编写方面的优劣比较,可酌情进行选择。 (平台:windows)

印象笔记

印象笔记自带markdown编辑器,如下图:

优点:提供分屏预览,无需直接编写md代码,只需点击按钮即可,操作方便 缺点:无法导出md文件到本地,这是它的致命缺点。

sublime text3

优点:安装插件后可以提供分屏预览 缺点:预览效果极差,超出的文本内容无法自动换行显示,而是直接隐藏。如下图红框部分

Typora

优点:简洁美观 缺点:不提供分屏预览,md代码编辑完成后回车即自动渲染出文本来。(虽然它认为这是优点,很多人习惯的却是分屏)

Atom

优点:提供分屏预览,有较多可拓展插件 缺点:响应速度极慢,编辑时明显感觉卡顿;软件过大,大概100多m;安装插件极其困难,失败率较高

HexoEditor

优点:简洁美观,提供分屏预览,图片插入方便 缺点:需要用npm指令下载安装,和Atom插件安装如出一辙,很容易卡死

Hexo-admin

非工具。Hexo自带的博客后台管理,可以在web ui界面下进行编辑 优点:提供分屏预览 缺点:界面过于简陋,自定义程度较低,本地服务器必须一直开着才能使用

Vscode

这是这么多工具中我觉得体验最好的,本篇博客也是用vscode编写。 优点:提供分屏预览、同步滚动等;较多markdown插件和主题;启动速度快,使用流畅不卡顿,渲染速度很快 缺点:需要自己写md代码,不过鉴于md语法并不复杂,我觉得这个缺点完全可以忽略不计。

最后是博客编写方面的一点小tip: 原生markdown语法并不支持定义字体颜色和大小等样式,但是由于在hexo中,我们编写的md文件最后会生成对应的html文件,所以完全可以在编写的时候使用html语法,浏览器会自动解析并渲染文件中包含的标签等。比如,上面就可以通过将句子放在span标签中,再加上内联样式达到荧光高亮的效果。不止是样式,我们还可以用<br>标签实现换行,让每一段不至于太紧凑。(md中空格是会被合并的,这点和html一样)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程创造城市

零基础html5网页开发#004 网站基本结构

在上一期当中我们已经学过了html的入门以及的基本的代码写法。那么今天我们学习的这样一个网站基本结构,对于我们一个整体的网站的开发来说,应该显得是最为的基础。

9620
来自专栏从零开始学自动化测试

httprunner学习20-extentreports无法加载问题(已解决)

最近有小伙伴反应使用httprunner的extentreports报告时,打开的页面样式全部丢失了,原本高大上的报告变成了丑八怪。 顿时心都凉了一大截,要是让...

12010
来自专栏Alone88

zfaka 增加易支付接口

Github:https://github.com/zlkbdotnet/zfaka

23810
来自专栏葡萄城控件技术团队

打造属于自己的 HTML/CSS/JavaScript 实时编辑器

目前市面上已经有很多类似的平台和方案了,类似像jsfiddle、CodePen、Storybook这样的平台,这些平台可以让我们在浏览器中创建代码并直接执行,无...

10610
来自专栏Python爬虫与数据挖掘

Python3.8 了解的差不多了吧,Python3.9 新特性了解一下!

原文有删改:https://docs.python.org/3.9/whatsnew/3.9.html

11230
来自专栏APP测试

Selenium自动化测试-8.iframe处理

在上一篇:Selenium自动化测试-获取元素属性信息,介绍了如何获取元素的内容、属性、状态信息。写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不...

10920
来自专栏陶士涵的菜地

[日常] 当前项目前端版本管理的情况

1.线上环境静态文件存放于前端CDN静态池,有一个专门的发布系统可以上传文件.在发布文件的时候需要创建url路径,因为CDN的缓存原因,在路径中增加了版本号,最...

11020
来自专栏老码农的一亩三分地

IT兄弟连 HTML5教程 HTML5表单 HTML表单设计2

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

9320
来自专栏Python工程师

可视化-bokeh-01-初识

系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

8830
来自专栏我分享我快乐

【案例】如何用html5 制作canvas酷炫的网状图形动画特效

话不多说,咱们书归正传!今天段老师要给同学们介绍的是一款基于html5 canvas实现酷炫的网状几何图形变换动画特效源码。

13010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励