为博客添加Prism代码高亮
刚刚使用家里的服务器建立了一个小站,由于很久没有记录自己的一些笔记,导致很多资料及知识无法正常记起来,所以这两天一直在忙于建立博客,由于工作需要和代码接触,所以建立的博客肯定需要代码高亮这个工具,在经过了很久都网络摸索,发现了Prism这个高亮工具,下面就详细介绍Prism在博客的安装方法:
官网地址://prismjs.com/download.html
官网很直观,没有那些花里花哨的东西,直接点击下载,进入到下载页面。
- 核心代码(必选)
- 主题(我选择的是“贵族黑”,别问我为什么这么叫,任性)
- 语法包(是不是很多,随便选,随便挑,反正不要钱)
- 插件(我用了行数显示,其他的没试过,园友自行挖掘)
选择完之后,点击两个下载按钮,便会下载对应的Js和Css,而且都是一个,是不是很方便!!!
下载下来的js和css文件可以分别在博客都头部及尾部引入,头部引入css文件在</head>前,js文件引入在</body>
Prism在文章编辑时,需要以下这一种代码形式写入,下面代码作为参考:
<pre class="language-css"><code>//高亮代码</code></pre>
.container .content .copy-link{
border:1px solid #E5E5E5;
background:#f9f9f9;
padding:15px 15px 15px 120px;
margin-bottom:30px;
position: relative;
margin-top:90px;
}
public function init(){
parent::init(); // TODO: Change the autogenerated stub
if(Yii::$app->user->id){
$this->redirect(Url::home());
}
}
需要的文件都已打包,如果需要请自行下载: