之前基于 Jekyll 模板的博客图片不能居中也没阴影效果、数学公式和表格也不能渲染、文字排版看起来也不太舒服,代码高亮不是很明显,所以今天找了点代码,简单配置了下,一并解决!
一、 图片居中加阴影
第一种方式是在 md 文档内部用居中的标签,这样图片就居中显示了:
<div align="center">
<img src="img_url"/>
</div>
不过这样需要对每个图片都操作一遍,太麻烦了,所以我直接在博客的主题样式文件 style.css
中加上了图片居中和添加阴影的效果,看起来比较美观:
.markdown-body img {
/* 图片居中 */
clear: both;
margin: 0 auto;
display: block;
/* 添加图片阴影 */
box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
这是居中加阴影的效果,还不错吧。
二、渲染数学公式
写机器学习博客的时候,需要大量使用公式,所以渲染公式很有必要,我在 include/head.html
中加上以下代码:
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">