代码高亮插件 Prismjs for Typecho
换了新的代码高插件,支持行号和语言显示,代码自动换行则无效,鱼与熊掌不能兼得。
插件的安装很简单,上传到插件目录/usr/plugins/
,到后台激活即可,记得将目录名称改为Prismjs
。
在编辑器里插入代码时,以加代码语言开始,以\
结束。以HTML
和CSS
为例:
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
评论已关闭