用户可以通过键盘快捷键和工具栏按钮来使用或者移除 Markdown 格式。MarkdownPad左右栏的分割方式令用户可以实时看到 HTML 格式的 Markdown 文档。
下载地址:http://markdownpad.com/
2.ReText:
ReText 是一个使用 Markdown 语法和 reStructuredText (reST) 结构的文本编辑器,编辑的内容支持导出到 PDF、ODT 和 HTML 以及纯文本,支持即时预览、网页生成以及 HTML 语法高亮、全屏模式,可导出文件到 Google Docs 等。
下载地址: http://sourceforge.net/p/retext/home/ReText/
3.WMD:
WMD (wmd-editor)是一个简单轻量级的HTML编辑器,使用的是 Markdown 文本格式数据,适合用来做博客评论、发帖和一些基本的内容发布系统,支持流行的各种浏览器。
下载地址: http://code.google.com/p/wmd/
4.Mou
Mou 是 Mac下杰出的 Markdown 编辑器,提供语法高亮、在线预览、同步滚动、全屏模式,支持自定保存、自动匹配,允许自定义主题,支持 CSS,HTML 和 PDF 导出等。
下载地址: http://mouapp.com/
5.EpicEditor
EpicEditor 是一个可嵌入式的 JavaScript Markdown 编辑器,提供全屏编辑、在线预览、自动保存草稿和离线编辑支持。对开发者提供可可靠的 API 做风格设置。
下载地址: http://epiceditor.com/
6.CuteMarkEd
CuteMarkEd 是一个 Markdown 编辑器,提供实时 HTML 预览、数学表达式和源码高亮。
下载地址:http://cloose.github.io/CuteMarkEd
7.MarkPad
MarkPad 是款开源的 Markdown 编辑器,与 Window 8 风格和谐友好的界面,可以直接在你的博客或者 GitHub 中打开、保存文档,直接将图片粘贴到 Markdown 文档中。
下载地址:http://code52.org/DownmarkerWPF/
8.Haroopad
Haroopad 是一款覆盖三大主流桌面系统的编辑器,支持 Windows、Mac OS X 和 Linux。 主题样式丰富,语法标亮支持 54 种编程语言。该工具重点推荐 Ubuntu/Linux 用户使用,从此可以告别 gedit 加 Markdown 插件这种工作方式了。
下载地址: http://pad.haroopress.com/user.html
9.MarkdownEditor
MarkdownEditor 是一款基于浏览器的 Markdown 文本编辑器,功能非常简单实用。
在线地址: http://jbt.github.io/markdown-editor
10.QMarkdowner
QMarkdowner是一款基于PyQt4的markdown编辑器,支持实时编辑与实时预览和全屏预览。
下载地址:https://github.com/dragondjf/QMarkdowner
这几个都可以
使用Md可以提升写作效率,同时增强文章排版的工整规范性,因此越来越多人尝试使用Md取代传统富文本编辑器作为写作工具。如果将Md看作是一门语言,那么与其最恰似的应当就是我们经常接触到的HTML——它们都是面向结构的语言。
因此,使用Md最大的问题是,本身的样式并不丰富。虽然有诸如Mou这种定制功能的Md工具可以很方便地控制基本样式,也有Typora这种支持Md × HTML的Md拓展,但是本身也有无法忽视的缺点:
因此我们要朝着以下方向去发展:
举一个最近发现的小例子:我想对特定的某几张图片进行居中。
一般来说,像这种,图片是通过默认样式 img进行居中的,而在sf.gg中,这个img默认是没有对齐的样式的,也就是直接向左对齐。
那如果我需要对图片A居中,而图片B左对齐,在这两个网站中,仅仅通过Md几乎无法实现。
首先复习一下img的Md语法:
内联写法:
外联写法:
在绝大多数情况下,这个alt是不会出现在页面中的——除非你的图片加载不出来。
因此,我们换种说法就是,这个alt是作为一种“退化”属性存在的,为的是让你在加载不出图片的情况下也能给用户一些图片的描述信息。
而title属性是当你将鼠标移动到图片上时会有一个跟随鼠标的小型提示器,用到的机会比alt频繁。
那么看回img的Md语法,总共有三个可以给我们使用的参数:
其中,title太常用,因此放到最后,alt在需要SEO的场景中比较重要,我们放到第二,而剩下的url理应就是我们的最好选择
结合一下css的属性选择器,我们可以配合css对这几个参数进行客制。
一般我们要把img居中,都会选择在img的父级中添加
这也是最标准的写法,不会改变img原本的display。但是很显然,我们无法单纯通过CSS来找到img的父级。
但是标题说了通过CSS来实现,那就不能使用JS了。因此在CSS不能爬树找父级的情况下,我们还是专注回img本身。
如果我们加入这样一个css:
$='center' 的意思是以 center 结尾的 src 属性,这里的用法是,在我们需要居中的图片中的url部分加上?center即可。
由于在HTTP协议中,问号后的参数不会改变请求资源本身,因此即使带参请求,只要后端没有特殊处理,那么这个图片本身的引用是不会有问题的。
那居左居右的排版也可以用这种方式去,甚至我们还能通过这种方式去设置缩放、旋转、偏转等效果。
自己试过...可以的~图片路径可以自己改,这里默认放在根目录下的img2里面~
<div class="sidebar">
<span class="ui_bbr5 fl mbm hide" data-status="true" style="display: inline">
<a class="fl c_grey1 bgc" onclick="addFavorite(this.href, '你的网站')return false" href="http://www.green.com/&quot>
<i class="sp_icos sp_icos_fav pngfix"></i>
收藏
</a>
</span>
<span class="ui_bbr5 fl hide" data-status="true" style="display: inline">
<a class="fl c_grey1 bgc top" href="#">
<i class="sp_icos sp_icos_top pngfix"></i>
回顶部
</a>
</span>
</div>
<style>
.sidebar {
bottom: 5px
left: 50%
margin-left: 490px
position: fixed
text-align: center
width: 35px
}
.sidebar span, .sidebar cite {
background-color: white
border: 1px solid #EFEBEF
box-shadow: 0 0 8px #CCCCCC
line-height: 1.1em
padding: 2px
width: 30px
}
.ui_bbr5 {border-radius: 5px 5px 5px 5px}
.mbm {margin-bottom: 10px}
.hide {display: none}
.sidebar {text-align: center}
.sidebar a, .sidebar a:hover {
background-color: #FFF6F6
padding: 5px
text-decoration: none
width: 20px
word-wrap: normal
}
.c_grey1 {color: #3C3C3C}
.fl {float: left}
a, a:hover { color: #DD295C}
a {color: #DD295Ctext-decoration: none}
.sp_icos_fav { background-position: -4px -294px}
.sp_icos {
background-image: url("/img2/sp_icos_12x12.png")
background-repeat: no-repeat
display: inline-block
height: 16px
width: 16px
}
.sidebar a, .sidebar a:hover {text-decoration: noneword-wrap: normal}
.sp_icos_top {background-position: -4px -73px}
.c_grey1 { color: #3C3C3C}
body{font: 12px/1.4 微软雅黑,tahoma,arial}
</style>
function addFavorite(url, title) {
try {
window.external.addFavorite(url, title)
} catch (e){
try {
window.sidebar.addPanel(title, url, '')
} catch (e) {
showDialog("请按 Ctrl+D 键添加到收藏夹", 'notice')
}
}
}
</script>