【干货】Markdown编辑博文,公式图片轻松搞定
*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
h1 {
font-size: 28px;
color: #000;
}
h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777;
font-size: 14px;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
/* TABLES
=============================================================================*/
table th {
font-weight: bold;
}
table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}
table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* IMAGES
=============================================================================*/
img {
max-width: 70%
}
-->
Markdown 使用操作手册
作者:白宁超
Blog:伏草唯存
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。Markdown下载地址。如果右侧不能即使显示请下载安装awesomium
1 兼容HTML
1.1 HTML在MD中的dome
Foo | Foo | Foo |
Foo | Foo | Foo |
1.2 HTML中的特殊字符自动转换
& 字符:
链接:http://images.google.com/images?num=30&q=larry+bird 自动转换:
http://images.google.com/images?num=30&q=larry+bird
< 符号:
1<2 自动转化: 1<2
©符号改写:: 自动转化 ©
建议|总结
采用MD内置标签比较复杂的时候,可以考虑采用HTML编辑
2 区块元素
2.1 段落和换行
换行采用br
2.2 标题
类 Setext 形式是用底线的形式,利用 = (最高阶标题)和 - (第二阶标题)
This is an H1
This is an H2
类 Atx 形式则是在行首插入 1 到 6 个 #
这是 H1
这是 H2
这是 H3
这是 H4
这是 H5
这是 H6
2.3 区块引用
每行的最前面加上 >
This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.
区块引用可以嵌套(例如:引用内的引用),只要根据层次加上不同数量的 >
This is the first level of quoting.
This is nested blockquote.
Back to the first level.
引用的区块包括标题、列表、代码区块等:
这是一个标题。
- 这是第一行列表项。
- 这是第二行列表项。
给出一些例子代码:
return shell_exec("echo $input | $markdown_script");
2.4 列表
无序列表使用星号、加号或是减号作为列表标记
- Red
- Blue
- Blue
有序列表则使用数字接着一个英文句点
- Bird
- McHale
- Parish
HTML 标记
- Bird
- McHale
- Parish
列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符:
This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.
如果要放代码区块的话,该区块就需要缩进两次,也就是 8 个空格或是 2 个制表符:
一列表项包含一个列表区块:
<代码写在这>
在行首出现数字-句点-空白,要避免这样的状况,你可以在句点前面加上反斜杠。
1986. What a great season.
2.5 代码区块
段落:缩进 4 个空格或是 1 个制表符,或者html中的p标签:
这是一个代码区块。
代码块
code标签代码块
这是一个代码区块。
`代码块
这是一个代码区块。
2.6 分隔线
用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。
建议|总结
1 标题采用多个 num#
2 段落采用<br/>
3 引用采用>
4 段落采用tab键
5 区块采用(`)或者<code/>
6 有序列表采用1.无序列表采用*
7 分割线采用***
3 区段元素
3.1 链接
行内式和参考式两种形式。[]里面是链接文本内容,()里面是网站,""里面是提示信息
行内链接
This is an example inline link.
等于This is an example inline link.
This link has no title attribute.
等于This link has no
title attribute.
定义链接:
Visit Daring Fireball for more information.
参考式链接
I get 10 times more traffic from Google than from
Yahoo or MSN.
改成用链接名称的方式写:
I get 10 times more traffic from Google than from
Yahoo or MSN.
或者采用
I get 10 times more traffic from Google
than from Yahoo or
MSN.
3.2 强调
Markdown 使用星号(*)和底线(_)作为标记类似em符号。
single asterisks
single underscores
Markdown 使用星号(**)和底线(__)作为标记类似strong符号。
double asterisks
double underscores
如果要在文字前后直接插入普通的星号或底线,你可以用反斜线:
*this text is surrounded by literal_asterisks*
建议:
1. 使用 **加粗**,而不是 __加粗__
2. 使用 *斜体*,而不是 _斜体_
3. 使用 ***粗斜***,而不是 **_粗斜_** 等
3.3 图片
行内式图片
详细叙述如下:
一个惊叹号 ! 接着一个方括号,里面放上图片的替代文字 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上 选择性的 'title' 文字。
参考式的图片
注意:到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 img
标签。
显示链接中带括号的图片
3.4 自动链接
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用尖括号包起来,Markdown 就会自动把它转成链接。如:
http://example.com/ Markdown 会转为: http://example.com/
邮址例子:
address@example.com Markdown 会转成:
ss@example.co
m">address@exa mple.com
3.5 表格
| Tables | Are | Cool |
| ------------- |---------------| ----------|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
表格案例
name age sex
————————————————————
bnc 18 man
bnc 18 man
bnc 18 man
3.6 层次
#### 第一章
1. 第一节
* 第二节(你不用敲 "2",自动就有了)
* 第一小节(推荐每层次缩进四个空格)
* 小小节 1
* 小小节 2
* 第二小节
建议|总结
1 链接:[an example](http://example.com/ "Title") 和 [google]: http://google.com/ "Google"
2 强调:**粗体** *斜体* ***粗斜***
3 图片:![图片的替代文字](http://pic28.nipic.com/20130424/11588775_115415688157_2.jpg "图片提示")和![Alt text][id]
[id]: http://img05.tooopen.com/images/20150531/tooopen_sy_127457023651.jpg "Optional title attribute"
4 自动链接:<http://example.com/>
5 表格:建议使用html书写
4 字体设置
4.1 字体大小、字号与颜色设置
我是黑体字
我是微软雅黑
我是华文彩云
黑体
我是宋体
我是灰色宋体
背景色:我是黑体字
这里的背景色是:OrangeRed, 十六进制颜色值:#FF4500, rgb(255, 69, 0)
大小设置: 1 - 7 的数字。浏览器默认值是 3。
颜色设置:color色彩选择器
5 编辑公式
5.1 方式一:适合html网页显示
1 MarkdownPad中点击"Tools > Options > Advanced > HTML Head Editor"。添加下列内容:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
2 打开LaTex公式编辑器
3 完成公式编辑,并负责自动生成的内容
4 $$复制公式$$
5 F6运行即可html中预览
公式示例
1 $$ f(x)=\sum \frac{a}{b} $$
2 $$ x^{y^z}=(1+{\rm e}^x)^{-2xy^w} $$
3 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
5.2 方式二:适合即时显示,PDF,html网页显示
1 打开LaTex公式编辑器
2 完成公式编辑,并负责自动生成的内容
3 完成如下步骤
<a href="http://www.codecogs.com/eqnedit.php?latex=x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" target="_blank"><img src="http://latex.codecogs.com/gif.latex? 复制公式 " title=" 提示信息 " /></a>
公式示例
6 常用快捷键
1 Ctrl + I : 斜体
测试斜体
2 Ctrl + B : 粗体
测试粗体
3 Ctrl + G : 图片
4 Ctrl + Q : 引用
测试引用
Ctrl + 1-6 : 标题 1-6
测试标题1-6
5 Ctrl + K : 代码块
测试代码块
6 Ctrl + L : 超链接
7 Ctrl + T : 时间戳
5/22/2017 7:21:56 PM
8 Ctrl + U : 无序列表
- 55
- 66
- 77
9 Ctrl + R : 水平标尺
10 F4 : 启用水平布局
11 F5 : 启用实时预览
12 F6 : 在浏览器中预览
13 Ctrl + Shift + O : 有序列表
- 22
- 33
14 Ctrl+Shift+1 导出HTML 15 Ctrl+Shift+2 导出PDF
7 参考文献
[1] Markdown 语法说明 (简体中文版)
[2] Markdown 公式指导手册
[3] LaTex公式编辑器
[4] Markdown输入数学公式
[5] 在线配置LaTex
【干货】Markdown编辑博文,公式图片轻松搞定的更多相关文章
- 【微服务】之二:从零开始,轻松搞定SpringCloud微服务系列--注册中心(一)
微服务体系,有效解决项目庞大.互相依赖的问题.目前SpringCloud体系有强大的一整套针对微服务的解决方案.本文中,重点对微服务体系中的服务发现注册中心进行详细说明.本篇中的注册中心,采用Netf ...
- 【微服务】之三:从零开始,轻松搞定SpringCloud微服务-配置中心
在整个微服务体系中,除了注册中心具有非常重要的意义之外,还有一个注册中心.注册中心作为管理在整个项目群的配置文件及动态参数的重要载体服务.Spring Cloud体系的子项目中,Spring Clou ...
- 从零开始,轻松搞定SpringCloud微服务系列
本系列博文目录 [微服务]之一:从零开始,轻松搞定SpringCloud微服务系列–开山篇(spring boot 小demo) [微服务]之二:从零开始,轻松搞定SpringCloud微服务系列–注 ...
- 【微服务】之四:轻松搞定SpringCloud微服务-负载均衡Ribbon
对于任何一个高可用高负载的系统来说,负载均衡是一个必不可少的名称.在大型分布式计算体系中,某个服务在单例的情况下,很难应对各种突发情况.因此,负载均衡是为了让系统在性能出现瓶颈或者其中一些出现状态下可 ...
- 【微服务】之六:轻松搞定SpringCloud微服务-API网关zuul
通过前面几篇文章的介绍,我们可以轻松搭建起来微服务体系中比较重要的几个基础构建服务.那么,在本篇博文中,我们重点讲解一下,如何将所有微服务的API同意对外暴露,这个就设计API网关的概念. 本系列教程 ...
- PDF怎么旋转页面,只需几步轻松搞定!
有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...
- 【微服务】之七:轻松搞定SpringCloud微服务-API权限控制
权限控制,是一个系统当中必须的重要功能.张三只能访问输入张三的特定功能,李四不能访问属于赵六的特定菜单.这就要求对整个体系做一个完善的权限控制体系.该体系应该具备针区分用户.权限.角色等各种必须的功能 ...
- 人脸识别JavaScript也可以轻松搞定
前言 是不是觉得不可思议,js已经强大到这个地步? 是的,js日新月异,它在不断的进步.只要稍不留神,那我们都只能望尘莫及了. 今天我们就来看看是什么js插件可以如此厉害? 人脸识别JavaScrip ...
- 分分钟轻松搞定IBM系列 RAID5搭建
分分钟轻松搞定IBM系列 RAID5搭建 按照 以下图片步骤一步步可轻松完成IBM服务器RAID1.5.10等的搭建. 此例是以RAID5为例,RAID1和10可举一反三.
随机推荐
- zookeeper的安装与部署-伪集群
1.Zookeeper的下载与解压 通过后面的链接下载Zookeeper: Zookeeper下载在此我们下载zookeeper-3.4.5下载后解压至安装目录下,本文我们解压到目录:/ ...
- Mybatis基础学习(三)—映射文件
一.输入映射 1.parameterType 指定输入参数的Java类,可以使用别名或者类的全限定名.它也可以接受基本数据类型.POJO对象.HashMap. (1)基本数据类型 (2 ...
- AngularJS1.X学习笔记14-动画(解读文档)
最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...
- 一些IO流的知识
IO流: 输入流:输出流: 字节流:字符流:为了处理文字数据方便而出现的对象. 其实这些对象的内部使用的还是字节流(因为文字最终也是字节数据) 只不过,通过字节流读取了相对应的字节数,没有对这些字节直 ...
- 利刃 MVVMLight 5:绑定在表单验证上的应用
表单验证是MVVM体系中的重要一块.而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合 逻辑.数据 和 UI定义 的关系之外,还为业务数据验证方案提供强大而灵活的支持 ...
- HTML5新特性-多线程(Worker SharedWorker)
There is no doubt that JavaScript是没有多线程之说的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比较长的时间做一件事的话,那么浏览器将会卡顿一 ...
- 最近公共祖先LCA(Tarjan算法)的思考和算法实现
LCA 最近公共祖先 Tarjan(离线)算法的基本思路及其算法实现 小广告:METO CODE 安溪一中信息学在线评测系统(OJ) //由于这是第一篇博客..有点瑕疵...比如我把false写成了f ...
- for xml path 如何将字段转换为xml的属性
for xml path 如何将字段作为xml的属性: 可在查询时 别名用 as '@..' 如'@value' 如下实例: SELECT A.GiftSetGUID AS '@value',A.Gi ...
- windows下使用wineshark分析抓取本地回环包
## 摘要 由于windows系统没有提供本地回环网络的接口,用Wireshark监控网络的话看不到localhost的流量. 想要获取本地的网络数据包,可以通过一款小巧的开源软件RawCap来进行抓 ...
- 【linux 爱好者群】程序猿的那些聊天记录
分享&&交流&&开放 you should get it 声明:好吧,我们的群只有5个人,但是有句话不是说的很对吗,一个项目最理想的不就是5个人么.我是写文本那个. 下 ...