文档章节

MarkDown入门简介

一零贰IV
 一零贰IV
发布于 10/19 23:04
字数 1813
阅读 20
收藏 0

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。

一、MarkDown简介及其基本语法

1、MarkDown简介

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

用markdown编写完后,我们可以导出到html发布到网站或者导出pdf保存到本地,十分的方便。最重要的是markdown源文件是纯文本文件,也就是意味着可以跨平台,使用 Markdown 的优点如下:

  • 专注你的文字内容而不是排版样式,安心写作。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容,兼容所有的文本编辑器与字处理软件。
  • 随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。
  • 可读、直观、学习成本低。

推荐一款MarkDown在线编辑器,CmdMarkDown,网址为:https://www.zybuluo.com/mdeditor ,大家可以先在这里学习基本语法。

2.MarkDown基本语法

(1) 标题

标题是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定义为标题,只要在这段文字前加 # 号即可。

# 一级标题 //对应html标签<h1>

## 二级标题 //对应html标签<h2>

### 三级标题 //对应html标签<h3>

以此类推,总共六级标题,建议在井号后加一个空格,这是最标准的 Markdown 语法。这里要注意的是#和后面的内容之间要有空格隔开。

(2)粗体和斜体

Markdown 的粗体和斜体也非常简单,用两个 * 包含一段文本就是粗体的语法,用一个 * 包含一段文本就是斜体的语法。

*Markdow* //斜体

**Markdow** //粗体

(3)分割线

分割线也比较简单,markdown语法为:

---

或者

***


(4)列表

这里的列表指的就是我们html中常用的有序列表和无序列表,及<ul>和<ol>.这里不再给出截图,大家可以自己动手实践。

其语法如下:

无序列表:

* 1 或者 - 1 或者 + 1

* 2 或者 - 2 或者 + 2

* 3 或者 - 3 或者 + 3

这里要注意的是有使用就都是用号,使用 '-' 就都用 '-' 号,混合使用会出错的。还有就是* 和内容之间要加一个空格。

有序列表比较简单,写法如下:

  1. Item1

  2. Item2

  3. Item3

当然,这里前面的序号可以随便写,总之后面会得到与之相同的输出。

(5)引用

如果你需要引用一小段别处的句子,那么就要用引用的格式。引用的语法就是在文字前面加 > ,如:

> 这里是引用

输出如下:

这里是引用

当然,不同的markdown编辑器输出的显示略有不同.

(6)超链接

超链接的写法比较特殊,但是也很好记忆,如我们加一个百度的超链接,markdown语法如下:

[百度](http://www.baidu.com)

效果如下:

百度

当我们导出到html中时,就会得到一个<a>标签的输出。

如果我们要加入一张图片,其语法如下:

![百度](https://www.baidu.com/img/bdlogo.png) 百度

跟文字链接相比,也就是前面多了一个感叹号!。

(7)表格

markdown的表格我感觉写起来并不是那么简便,我们先来看一下表格的写法:

| Tables | Are | Cool |

| ------------- |:-------------:| -----:|

| col 3 is | right-aligned | $1600 |

| col 2 is | centered | $12 |

| zebra stripes | are neat | $1 |

显示结果如下:

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

这里值得注意的是第二行,|:------------:|,这里两边加冒号就是居中,如果只有一边加冒号就是哪边对齐,如Cool那一列就是右对齐。默认左对齐。

(8)代码框

程序员写东西,难免会插入一些代码,在 Markdown下实现也非常简单,只需要用两个``` 把中间的代码包裹起来, 效果如下:

public Class{
	public static void main(String[] args){
	...
	}
}

注意这里的`不是单引号,而是键盘左边那个~上的`。

二、打造自己的MarkDown编辑器

上面说了那么多,都是markdown的基本语法,下面我们开始说怎么让自己的网站后台支持markdown,首先,我们必须要明白一点的是,之所以在网站中可以使用markdown是因为markdown可以导出html,所以我们做的就是把markdown转换成html就ok了。

关于markdown转换成html,网上已经有开源的js库了,我们没有必要再去重复造轮子,这里我们使用开源项目showdown.js:

GitHub地址为:https://github.com/showdownjs/showdown

这个插件使用方法十分简单,使用方法如下:

var Showdown = require('showdown');
var converter = new Showdown.converter();

converter.makeHtml('#hello markdown!');

// <h1 id="hellomarkdown">hello makrdown!</h1>

最后一行代码,makeHtml()这个方法会返回导出的html代码,然后我们将其显示出来就可以了。

下面我们下载showdownjs,放到本地,写一个demo来测试一下,我们新建一个html文件,添加js引用,代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown</title>
    <script type="text/javascript" src="showdown.min.js"></script>
</head>
</style>
<body>

</body>
</html>

然后,我们添加一个<textare>用来输入markdown内容,再添加一个div来显示markdown的输出结果。然后,编写javascript代码,取出用户输入的内容,然后把导出的html代码显示在div中,整体页面代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown</title>
    <script type="text/javascript" src="showdown.min.js"></script>
</head>
<style>
    body {
      font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
     font-size: 16px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
    }
    ul li {
        line-height: 24px;
    }
    blockquote {
        border-left:#eee solid 5px;
        padding-left:20px;
    }
    code {
        color:#D34B62;
        background: #F9F2F4;
    }
</style>
<body>
<div>
    <textarea id="content" style="height:400px;width:600px;" onkeyup="compile()"></textarea>
    <div id="result"></div>

</div>
<script type="text/javascript">
function compile(){
    var text = document.getElementById("content").value;
    var converter = new showdown.Converter();
    var html = converter.makeHtml(text);
    document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>

这里我们给<textare>添加onkeyup事件,这样就可以实时的看到编辑结果了。页面运行效果如下:

这里加了一些css样式对显示结果进行渲染,这样看起来会好看一些,大家可以根据输出的html标签,然后自己添加css样式进行渲染。

有一点遗憾的是,貌似这个showdownjs不支持table。

© 著作权归作者所有

共有 人打赏支持
一零贰IV
粉丝 18
博文 108
码字总数 62435
作品 0
武汉
程序员
私信 提问
markdown学习路线

markdown 学习路线 简介 Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats usi......

heavenseahill
2017/12/06
0
0
R Markdown与RStudio IDE深度结合

作者:师爷,R语言中文社区作者, 知乎专栏: https://zhuanlan.zhihu.com/rstudio The RStudio IDE 拥有非常多的独特设计,该设计能够方便编写执行交互式文档,本文介绍以下几点主要设计。 ...

R语言中文社区
09/05
0
0
Markdown入门指导

前言 Markdown 是一种「标记语言」,通常为程序员群体所用。这里解释一下作家用 Markdown 保存自己写的东西有什么好处。 大部分作家用 Word 或 Pages 写作,过去的文档也大都以 .doc, .docx格...

zengxiantao1994
2017/10/28
0
0
06 万万没想到,Github还有这些功能

最近一直看到有人在Github上写博客,Github是程序员专属,我们应该怎么来玩GIthub呢? Github虚幻私塾.png 我们可以在上面托管一些开源的程序项目,对程序感兴趣的人就可以加入到项目中,贡献...

虚幻私塾
2017/12/17
0
0
代码小白产品妹子教你使用markdown(详细教程整理版)

了解markdown 工欲善其事必先利其器,首先解决markdown是什么这个入门问题。 如果你是IT相关工作者的话,我会告诉你markdown跟C,java一样,是一门语言,这门语言的设计核心是创造出输出操作...

Alice09
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
31分钟前
0
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
34分钟前
0
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
41分钟前
2
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
2
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部