Laravel 给Markdow代码片添加高亮

在使用Markdow编辑器过程中展示页面中code标签中的代码片段并没有添加代码高亮,而加了高亮会让代码出现不同的颜色代码,可以让代码看起来更直观,也更美观。Markdow编辑器默认没有添加代码高亮,在网上找了几款插件,觉得highlight的插件比较实用,而且用起来比较简单。

Laravel 给highlight.js高亮插件 添加增加行数-点击

加了代码高亮如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>hello word</p>
</body>
</html>

1.下载highlight.js插件

高亮插件下载地址
1.1 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮。通常common就足够用了。
勾选你常用的语言
1.2 然后点击下面的download按钮,下载,解压,里面会有js文件和css文件。
1.3 js文件决定你的代码哪些部分会变高亮,css文件决定你的代码会变成什么颜色~

2.使用highlightgao高亮插件

2.1 在解压后的文件里找到一个highlight.pack.js文件,在使用时导入这个js文件。

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/highlight.pack.js"></script>

2.2 打开里面的styles文件,里面有很多的css文件。这些文件可以更改你的展示代码的css样式,包括高亮的颜色和背景色(主题色)。

2.3 在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式?这个网址有各个css文件的效果展示:https://highlightjs.org/static/demo/

这里我选择了一个dark.css文件:

<link rel="stylesheet" type="text/css" href="css/dark.css"/>

导入js文件和css文件后然后就可以使用了。

阅读 195

Comments