加上了代码高亮!!!

https://github.com/google/code-prettify

Posted on September 5, 2016

所以现在应该可以开始贴代码上来了。
写这个blog的原本目的是踩坑,因为laravel5.3加了一些新特性,其中json存取和全文搜索个人觉得可能有利于9月治愈系的架构设计。
另外一个比较看重的地方是5.3开始原生支持vue了,这是件好事,我也正在学习vue.js的使用。


那么,下面讲一下代码高亮的实现。

  • 首先需要引入一些文件

    <link rel="stylesheet" href="/assets/code-prettify/skins/desert.css">
    <script src="/assets/code-prettify/prettify.js"></script>
  • 但是这样是不够的,因为这里是markdown转html,<pre>是不会自带class的,所以我们要

    <script>
        $('pre').addClass('prettyprint linenums');
        prettyPrint();
    </script>
  • 这样就给所有的pre标签带上了prettyprint,现在理论上可以正常渲染了,然而
    屏幕快照 2016-09-05 下午2.23.48.png

  • linenums并没有正常显示,所以我们要写点css

    <style>
        .linenums li {
            list-style-type: decimal;
        }
    </style>
  • 效果可以看贴出来的代码,如果不喜欢这个配色,也可以换其他的主题

    完。。。