本文最后更新于2021年11月9日,已超过1070天没有更新,若内容或图片失效,请留言反馈。

换了新的代码高插件,支持行号和语言显示,代码自动换行则无效,鱼与熊掌不能兼得。

插件的安装很简单,上传到插件目录/usr/plugins/,到后台激活即可,记得将目录名称改为Prismjs

在编辑器里插入代码时,以加代码语言开始,以\结束。以HTMLCSS为例:

1.HTML

\`\html

Hello, Here i will share Google Material Design eBook.

You can going to my website or drop me Email for more info.

\`\


显示效果如下:

<div>
    <p><strong>Hello,</strong> Here i will share <a href="http://static.googleusercontent.com/design/material-design.pdf">Google Material Design eBook</a>. </p>
    <p>You can going to <a href="http://www.google.com">my website</a> or drop me <a href="mailto:agus@creatiface.com">Email</a> for more info.</p>
</div>

2.CSS

\`\css
div{
margin: 40px;
padding: 20px;
background-color: #e6ee9c;
}

p{
font-family: Arial;
font-size: 20px;
color: #555;
}

a{
font-weight: bold;
text-decoration: none;
}

a[href^="http://"]{
padding-right: 28px;
color: #188FD1;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC+ElEQVRIia2Vy2sUQRDGy0QNhqjZ3Znq+AoKXoIvEA+KOQT0InoSvQiCIOhBAoniRUT3EM1uprtyENT8A6KrF0ESUVCJz3VnumojHhTUgw8kF/FgfMWMh2yyyWQ20WhDXYaar76u+nU3wP9Yrb01qWzQlPTslmTm6RpoSc/9Z8269ENUWtpdsv3KyI+G7mI4FsrI+2Q22PyHUmGV4xVakJhc4ntKy0tF/AqJv48JohZWhtucLn/jYi+/CrXdjyQWIKyaVtrx/J1o5PlEd3GBRgbR2KPQ488b+xe1PZbwCmvjlffm5iNxz0zC0VAk+VTHo2UAACljt2FXYetU8R5/niK5Uerl8F8XMfImmX2y3PF4X33n45VT9JWx50bd8G1FcudvCzR0F0PXWF9RcAbCcM4kcVf7zYr4FxIfRyMXI85eu4YPJDJ+Y136Iaa8ge1I0lexCNmrU9yjlpuutntQc1ckOWg8P5CYClg4J5o7PniyX+vO9rvjufWdj1c6Hu9zyR6MOB9e1BmsjqcBACCscokL8fPgtnJee25BwgvWo+FvkaRblcVLrTV8JH4X0lfOaknPRS0cQ8VrZeTydIFG7lfA9sMEerhtNsTMgOwwAAA0nh9IoJFP/70Ayc9RegyfruzCXneydtOsosvfOHotGBmsVACN3J9pyNMux/N3lvr1uQJqI6ls0DQtRdruUCQno5HI+OsASS6UDsapSidTaVtceDafihf3m5FkKAbRoYVp3wGlbVEZHqnNPljqZO0mZXgk9uhrfrtEDxxKdjxdAem7dQmvsFYZm4k+NuXWcro0YPniEhfKuNrMv9LjEhegtbcGAABKLbg0vudcrlqRXJk1mlpe1p7pXwJlx/xRkdyZ1NhcrhoNe7MQvzvpggMAcA13NHQXQ9TB7vGPrb01jgl2KZK8IpaZhJHkHZrgMORy1TEchFVKSzuSvFBanqGWm2jkGprgcCLjLwYAqM/YDa7mE2jkmtL8SJHkkaQPjRhX2x0T3+Lo+g2ceJ2EyCf1/AAAAABJRU5ErkJggg==) no-repeat center right;
}

a[href^="mailto:"]{
padding-right: 28px;
color: #E96966;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB/0lEQVRIid3QvU8TcRzH8Vv5G4yDmxsuDswmFNyrotG7a7WPB+dDVOLDJBoHY4wjOtmEoUtTsLW2nvp7upbQBBuUlMS0GEFaRUmwZ2LUflg41By1veKi3+S9fl7JV5L+yysWi3vz+fxFIcSVTjJN8zwhZHdH44VCYVQIAc65qyilTdM0h9oCnPMvuVwOyWTSVYwxcM5X2gKMsWY2m0UikXAVpRScc6stQCltZjIZxONxV7kCDMNAOp121eaL/gxMDhzYzxhrplIpxGIxV1FKISj9NuXx9G47PuXx9D4aHPjKOQchBIZhuIoxBpMQpA8ONib7+/c4gIp8bLp4+BBMISC6LE8IXgwdQfn40QcOYCmg1urhAGoXzmEhnUKpVHLV69RDrF0ehaVrqKonMi0Bu5WrlzBPnrcdLhsGVm9eh6VrW1V98uO2QD0cQD0SxLsb1/ByuuAYnhcC9bt3YJ0e/m3c0jVUFCXbGbDZ+2gIS7dvYW52FnMzM1i+P47GWd0xbPfGp+ZcAVuQFsbamZGWwz8B5UlXgN2HSBDrw5HWgKoYOwLsViMhrI9EHcBbv/z0rwB2H6MhfP4FWvQrzxzA8klfuVvA7pMWRkPXUFXVCQfwSlH21YKnfuwUqYcC3xe83l0OQJIkyezr66n45bGKX77XTYuqPGZ6vT3bjv+ztwFC0SflTvpH3gAAAABJRU5ErkJggg==) no-repeat center right;
}

a[href$=".pdf"]{
padding-right: 28px;
color: #EA4C3A;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB6klEQVRIib2VsWtUQRDGlxQWohBSiqWdRSJ6997MXvSa83i7M8khpLFK/ANsrIQU1wVEEVOkFEQLG7FMZWthaxBTXdB77+3OGmI0WATNs0gEUe/lTO7lg4FdmP1+OzOwq4SwqDLUiQEc6SXP9U5ZCMFdMbhwWJ4jvfQXwHO9o0oUKLonhEWwsFGWp5RS+5f5T4A30HMUPxbC4r3WZ0cOcBY2vdFPPMG3Yu7iqZEDxOK6J/zqCF6V5R2jAnwmhIUzuFgJ4Neh7DperQSQ2fiGEBY5YbeaCghfi8V1YdhNkyuXRgpITTQrDLsyAxeE8Lm38Dbjy6dHAii6aiwQrgXGFaWU2m7DRLCw4Vmv5tRoZm09vZlE548MEBPPC2GRc3w/ELz0FmXAu5M6g4tFV40NBZC55hmXRLeEMRPCQiy8C4wrjuFmnxqTgeGaEH7xHL/oU2PSMd4Wwi1h/fBQQDB1EsL0wPjjJ8baP6tr1abEQl8I3viZqCUUPwqEa6WAnPCBEPzwNt7xNt6RVm1q0DCVUupDS58LjE/Fwp5Y2PMJ3hkIyAnq+2u9KoTfUxPNlpn/rl6nOd7rNMdLh5xznBzst8TgwrDmf6q0RVlbT2+3YeKo5gMBjnFZTDw/inCMyyf4JzN8rjKO0+qh9BPj9Pejl+xACQAAAABJRU5ErkJggg==) no-repeat center right;
}

a:hover{
color: #333;
}
\`\

显示效果如下:

div{
    margin: 40px;
    padding: 20px;
    background-color: #e6ee9c;
}
p{
    font-family: Arial;
    font-size: 20px;
    color: #555;
}
a{
    font-weight: bold;
    text-decoration: none;
}
a[href^="http://"]{
    padding-right: 28px;
    color: #188FD1;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC+ElEQVRIia2Vy2sUQRDGy0QNhqjZ3Znq+AoKXoIvEA+KOQT0InoSvQiCIOhBAoniRUT3EM1uprtyENT8A6KrF0ESUVCJz3VnumojHhTUgw8kF/FgfMWMh2yyyWQ20WhDXYaar76u+nU3wP9Yrb01qWzQlPTslmTm6RpoSc/9Z8269ENUWtpdsv3KyI+G7mI4FsrI+2Q22PyHUmGV4xVakJhc4ntKy0tF/AqJv48JohZWhtucLn/jYi+/CrXdjyQWIKyaVtrx/J1o5PlEd3GBRgbR2KPQ488b+xe1PZbwCmvjlffm5iNxz0zC0VAk+VTHo2UAACljt2FXYetU8R5/niK5Uerl8F8XMfImmX2y3PF4X33n45VT9JWx50bd8G1FcudvCzR0F0PXWF9RcAbCcM4kcVf7zYr4FxIfRyMXI85eu4YPJDJ+Y136Iaa8ge1I0lexCNmrU9yjlpuutntQc1ckOWg8P5CYClg4J5o7PniyX+vO9rvjufWdj1c6Hu9zyR6MOB9e1BmsjqcBACCscokL8fPgtnJee25BwgvWo+FvkaRblcVLrTV8JH4X0lfOaknPRS0cQ8VrZeTydIFG7lfA9sMEerhtNsTMgOwwAAA0nh9IoJFP/70Ayc9RegyfruzCXneydtOsosvfOHotGBmsVACN3J9pyNMux/N3lvr1uQJqI6ls0DQtRdruUCQno5HI+OsASS6UDsapSidTaVtceDafihf3m5FkKAbRoYVp3wGlbVEZHqnNPljqZO0mZXgk9uhrfrtEDxxKdjxdAem7dQmvsFYZm4k+NuXWcro0YPniEhfKuNrMv9LjEhegtbcGAABKLbg0vudcrlqRXJk1mlpe1p7pXwJlx/xRkdyZ1NhcrhoNe7MQvzvpggMAcA13NHQXQ9TB7vGPrb01jgl2KZK8IpaZhJHkHZrgMORy1TEchFVKSzuSvFBanqGWm2jkGprgcCLjLwYAqM/YDa7mE2jkmtL8SJHkkaQPjRhX2x0T3+Lo+g2ceJ2EyCf1/AAAAABJRU5ErkJggg==) no-repeat center right;
}
a[href^="mailto:"]{
    padding-right: 28px;
    color: #E96966;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB/0lEQVRIid3QvU8TcRzH8Vv5G4yDmxsuDswmFNyrotG7a7WPB+dDVOLDJBoHY4wjOtmEoUtTsLW2nvp7upbQBBuUlMS0GEFaRUmwZ2LUflg41By1veKi3+S9fl7JV5L+yysWi3vz+fxFIcSVTjJN8zwhZHdH44VCYVQIAc65qyilTdM0h9oCnPMvuVwOyWTSVYwxcM5X2gKMsWY2m0UikXAVpRScc6stQCltZjIZxONxV7kCDMNAOp121eaL/gxMDhzYzxhrplIpxGIxV1FKISj9NuXx9G47PuXx9D4aHPjKOQchBIZhuIoxBpMQpA8ONib7+/c4gIp8bLp4+BBMISC6LE8IXgwdQfn40QcOYCmg1urhAGoXzmEhnUKpVHLV69RDrF0ehaVrqKonMi0Bu5WrlzBPnrcdLhsGVm9eh6VrW1V98uO2QD0cQD0SxLsb1/ByuuAYnhcC9bt3YJ0e/m3c0jVUFCXbGbDZ+2gIS7dvYW52FnMzM1i+P47GWd0xbPfGp+ZcAVuQFsbamZGWwz8B5UlXgN2HSBDrw5HWgKoYOwLsViMhrI9EHcBbv/z0rwB2H6MhfP4FWvQrzxzA8klfuVvA7pMWRkPXUFXVCQfwSlH21YKnfuwUqYcC3xe83l0OQJIkyezr66n45bGKX77XTYuqPGZ6vT3bjv+ztwFC0SflTvpH3gAAAABJRU5ErkJggg==) no-repeat center right;
}
a[href$=".pdf"]{
    padding-right: 28px;
    color: #EA4C3A;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB6klEQVRIib2VsWtUQRDGlxQWohBSiqWdRSJ6997MXvSa83i7M8khpLFK/ANsrIQU1wVEEVOkFEQLG7FMZWthaxBTXdB77+3OGmI0WATNs0gEUe/lTO7lg4FdmP1+OzOwq4SwqDLUiQEc6SXP9U5ZCMFdMbhwWJ4jvfQXwHO9o0oUKLonhEWwsFGWp5RS+5f5T4A30HMUPxbC4r3WZ0cOcBY2vdFPPMG3Yu7iqZEDxOK6J/zqCF6V5R2jAnwmhIUzuFgJ4Neh7DperQSQ2fiGEBY5YbeaCghfi8V1YdhNkyuXRgpITTQrDLsyAxeE8Lm38Dbjy6dHAii6aiwQrgXGFaWU2m7DRLCw4Vmv5tRoZm09vZlE548MEBPPC2GRc3w/ELz0FmXAu5M6g4tFV40NBZC55hmXRLeEMRPCQiy8C4wrjuFmnxqTgeGaEH7xHL/oU2PSMd4Wwi1h/fBQQDB1EsL0wPjjJ8baP6tr1abEQl8I3viZqCUUPwqEa6WAnPCBEPzwNt7xNt6RVm1q0DCVUupDS58LjE/Fwp5Y2PMJ3hkIyAnq+2u9KoTfUxPNlpn/rl6nOd7rNMdLh5xznBzst8TgwrDmf6q0RVlbT2+3YeKo5gMBjnFZTDw/inCMyyf4JzN8rjKO0+qh9BPj9Pejl+xACQAAAABJRU5ErkJggg==) no-repeat center right;
}
a:hover{
    color: #333;
}

3.题外话:

上面的 HTML 和 CSS 演示效果在此 http://jsfiddle.net/agusesetiyono/3sL1r0mw/light/

关于这个插件,本人 Fork 了一份,地址如下:

https://github.com/Fengtalk/Prismjs

标签: 代码高亮

评论已关闭