前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在静态页面上使用markdown排版 原

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

作者头像
tianyawhl
发布2019-04-04 09:40:09
1.2K0
发布2019-04-04 09:40:09
举报
文章被收录于专栏:前端之攻略

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> 才对。

代码块

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

语法高亮

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

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

代码语言:javascript
复制
```html
<div class="singleLineEllipsis">单行文本溢出,单行文本溢出,</div>
<div class="multipleLineEllipsis">多行文本溢出,多行文本溢出,多行文本溢出</div>
代码语言:javascript
复制
```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

```javascript
function add(x, y) {
  return x + y
}
代码语言:javascript
复制
[代码行数](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
}
代码语言:javascript
复制
### [任务列表](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

表格

代码语言:javascript
复制
First Header | Second Header
:----------: | -------------
|Content from cell 1| Content from cell 2|
Content in the first column | Content in the second column

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 详细语法说明:
    • 标题
      • 强调
        • 无序列表
      • 代码块
        • 语法高亮
      • 表格
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档