语法高亮插件 Prismjs 在 Laravel 中的使用

技术备忘 |5个月前 |0


之前语法高亮是直接引用 jscss 的,并不是使用 Webpack 方式,如果想修改配置,增加语法支持,更换主题等,都必须去官网重新下载,然后再上传到服务器,或者进服务器直接下载,非常的麻烦。这次用 Vue 重构评论系统,顺便把语法高亮也重新弄下,从此,修改相关的东西,或者更换主题,就只需要修改 .babelrc 文件里的内容,再重新编译就好了。

开始吧

安装 prismjs

npm install prismjs
//或者
yarn add prismjs

安装 babel 插件

npm install babel-plugin-prismjs
//或者
yarn add babel-plugin-prismjs

在文件 resources/js/app.js 引入

require('./bootstrap');

import Prism from 'prismjs'; //这里引入

window.Vue = require('vue');

const app = new Vue({
    el: '#app'
});

在项目根目录新建 .babelrc 文件

{
    "plugins": [
        [
            "prismjs",
            {
                "languages": [
                    "javascript",
                    "css",
                    "markup",
                    "php",
                    "sql",
                    "bash",
                    "json",
                    "git",
                ],
                "plugins": [
                    "toolbar",
                    "show-language",
                    "copy-to-clipboard",
                    "line-numbers"
                ],
                "theme": "default",
                "css": true
            }
        ]
    ]
}

css 设置为 false 时,要手动引入 css

文件 resources/sass/app.scss

@import "~prismjs/themes/prism.css";// 也可以导入自定义的主题
@import "~prismjs/plugins/toolbar/prism-toolbar.css";//使用了显示语言和复制功能的插件,必须引入
@import "~prismjs/plugins/line-numbers/prism-line-numbers.css";//显示行号

显示行号

显示行号,则需要给 pre 标签添加名为 'line-numbers'class

$('pre').addClass("line-numbers").css("white-space", "pre-wrap");//当代码区域 pre 的宽度不够时会自动换行
$('pre').addClass("line-numbers");//当代码区域 pre 的宽度不够时不会换行,会出现滚动条
npm run dev
//或者
yarn dev

好了,大功告成,效果参考本站,更多功能参考 官网

MeiWJ
A PHP Web Artisan

完善源自用心 細節決定成敗