编程技术
Markdown居中方法
使用markdown-it-center-text的插件扩展居中语法。
# 使文字与图片居中
比如我想要下面的
文字都设置为居中内容
以为博客搬家了，这里没有使用这个插件
->我是Mr.Wu.
我需要居中才显示得好看<-
1
2
2
- 我是Mr.Wu.
- 我需要居中才显示得好看
我想要
图片居中处理
md
-><-
1
2
2
# 安装Markdown插件
- 通过
yarnnpm安装
yarn add markdown-it-center-text #我使用yarn安装
#或者 npm install markdown-it-center-text --save
1
2
2
- 在config.js添加Markdown扩展
// ~/.vuepress/config.js
module.exports = {
markdown: {
extendMarkdown: md => {
md.use(require('markdown-it-center-text'))
md.use(require('mdfigcaption'))
}
}
}
//markdown-it-center-text为本文使说的居中插件
//mdfigcaption是一个用于显示图片标题，但并没有实现，说是实验中的功能。
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 已经实现了 html 结构的生成,定义一下对应的 css 样式
// ~/theme/styles/theme.styl
.content:not(.custom)
img
display block //我的网站去掉了这个
max-width 100%
.text-align-center
text-align center
figure
display inline-block
text-align center
margin 0 0 1rem
figcaption
background-color #f7f7f7
color $accentColor
font-size .8rem
padding .4rem
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
阅时约 3 分钟
