为博客添加Prism代码高亮

作者: 管理员 分类: 代码,随笔 发布时间: 2020-09-11 21:10
刚刚使用家里的服务器建立了一个小站,由于很久没有记录自己的一些笔记,导致很多资料及知识无法正常记起来,所以这两天一直在忙于建立博客,由于工作需要和代码接触,所以建立的博客肯定需要代码高亮这个工具,在经过了很久都网络摸索,发现了Prism这个高亮工具,下面就详细介绍Prism在博客的安装方法:

官网地址:http://prismjs.com/download.html

官网很直观,没有那些花里花哨的东西,直接点击下载,进入到下载页面。

  1. 核心代码(必选)
  2. 主题(我选择的是“贵族黑”,别问我为什么这么叫,任性)
  3. 语法包(是不是很多,随便选,随便挑,反正不要钱)
  4. 插件(我用了行数显示,其他的没试过,园友自行挖掘)

选择完之后,点击两个下载按钮,便会下载对应的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());
    }
}
需要的文件都已打包,如果需要请自行下载:

发表评论

电子邮件地址不会被公开。