文档章节

如何在静态页面上使用markdown排版

tianyawhl
 tianyawhl
发布于 01/11 16:22
字数 778
阅读 14
收藏 0

Markdown是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)。它允许人们 “使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档。”,转换成html最方便的方式是用插件

我找了几个插件,最后觉得还是atome的markdown-preview-enhanced插件比较好用,预览界面简洁美观,效果如下:

首先安装markdown-preview-enhanced插件(安装成功后会在扩展中显示,点击Toggle可以实时看效果)

如果把显示的效果放到外面静态页面中,在markdow preview 界面右键-HTML-HTML(offline) 导出html,导出的html中包含着样式,我们可以把样式单独放在一个文件中,供其他页面使用

markdown-preview-enhanced插件的语法与markdown基本一样,主要区别是代码块,如果要高亮,需要在```后增加代码的类型,如css,javascript,html等

详细语法说明:

标题

# 这是 <h1> 一级标题

## 这是 <h2> 二级标题

### 这是 <h3> 三级标题

#### 这是 <h4> 四级标题

##### 这是 <h5> 五级标题

###### 这是 <h6> 六级标题

强调

这会是 斜体 的文字

这会是 斜体 的文字

这会是 粗体 的文字

这会是 粗体 的文字

你也 组合 这些符号

这个文字将会被横线删除

无序列表

* Item 1

* Item 2

* Item 2a

* Item 2b

有序列表

1. Item 1

1. Item 2

1. Item 3

1. Item 3a

1. Item 3b

引用

> We're living the future so

> the present is our past.

分割线

--- 连字符

*** 星号

___ 下划线

行内代码

我觉得你应该在这里使用 <addr> 才对。

代码块

你可以在你的代码上面和下面添加 ``` 来表示代码块。

语法高亮

你可以给你的代码块添加任何一种语言的语法高亮

例如,下面代码添加语法高亮:

```html
<div class="singleLineEllipsis">单行文本溢出,单行文本溢出,</div>
<div class="multipleLineEllipsis">多行文本溢出,多行文本溢出,多行文本溢出</div>



```css

```css
.singleLineEllipsis {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multipleLineEllipsis {
  width: 100px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}



```javascript

```javascript
function add(x, y) {
  return x + y
}



[代码行数](https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics?id=%e4%bb%a3%e7%a0%81%e8%a1%8c%e6%95%b0)

如果你想要你的代码块显示代码行数,只要添加 `line-numbers` class 就可以了。

```javascript
```javascript {.line-numbers}
function add(x, y) {
  return x + y
}



### [任务列表](https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics?id=%e4%bb%bb%e5%8a%a1%e5%88%97%e8%a1%a8)

```html
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item


表格

First Header | Second Header
:----------: | -------------
|Content from cell 1| Content from cell 2|
Content in the first column | Content in the second column


我的个人网站-前端之攻略

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 5
博文 238
码字总数 122108
作品 0
常州
前端工程师
私信 提问
Gitblog v2.1.3 发布,开源 markdown 博客系统

Gitblogv2.1版本发布更新 2.1.3版本更新特性 此版本主要是bug修复 1.修复了中文markdown文件名页面404的问题 2.修复了不同文件夹下同名markdown冲突的问题 3.修复draft状态博客也显示的bug 4...

jockchou
2015/08/22
1K
6
Markdown 博客系统--Gitblog

一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难,无法实时预览的缺点,一...

jockchou
2015/07/31
6.2K
1
Gitblog 官网更新,Markdown 博客系统

Markdown 博客系统 Gitblog 官网更新! Gitblog官网 Gitblog使用手册 官方截图 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你...

jockchou
2015/08/03
798
2
Gitblog官方网站发布上线

Gitblog官方网站发布上线 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难...

jockchou
2015/08/03
0
0
Gitblog-v2.1 版本更新功能,Markdown 博客系统

Gitblog 2.1 更新进度,已经完成开发的功能: 1.优化了博客属性的提取,采用正则,减少代码 2.summary属性支持多行 3.支持wordpress导入 4.SEO优化 5.新增主题line 6.博客可定义head属性表示...

jockchou
2015/08/04
2.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

四、RabbitMQ3.7在CentOS7下的安装

安装依赖 sudo yum install -y gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf java-1.8.0-openjdk-devel git 创建yum源 vi /etc/yum.repos.d/rabbitmq-erlang.repo [......

XuePeng77
今天
2
0
android 延长Toast的时长

示例:myToast(5000,"hello"); public void myToast(int showTime, String msg) { Toast hello = Toast.makeText(getActivity(), msg, Toast.LENGTH_SHORT); new CountDownTimer(......

雨焰
昨天
4
0
浅谈mybatis的日志适配模式

Java开发中经常用到的日志框架有很多,Log4j、Log4j2、slf4j等等,Mybatis定义了一套统一的日志接口供上层使用,并为上述常用的日志框架提供了相应的适配器。有关适配器模式例子可以参考 设计...

算法之名
昨天
13
0
大数据教程(13.6)sqoop使用教程

上一章节,介绍了sqoop数据迁移工具安装以及简单导入实例的相关知识;本篇博客,博主将继续为小伙伴们分享sqoop的使用。 一、sqoop数据导入 (1)、导入关系表到HIVE ./sqoop import --connect...

em_aaron
昨天
3
0
Git cherry-pick 使用总结

应用背景:假设现在有两个分支:dev_01, dev_02. 如果我想把dev_01分支上的某几个commit合并到dev_02分支, 那么怎么办呢? 这就是cherry-pick的工作了。cherry-pick会捡选某些commit, 即把某...

天王盖地虎626
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部