前言
博客主题从Spimes 2.5升级到4.4后,原来对Code Prettify的使用不再适用于新的版本,新版本使用Code Prettify插件如下文。
教程
- 安装并启用插件,详情见GitHub
把主题文件style.css里面自带的高亮样式代码删掉
/* hljs行号 */
.hljs ol { list-style: decimal; margin: 0 0 0 40px !important; padding: 0 }
.hljs ol li { font-size: 13px; list-style: decimal-leading-zero; border-left: 1px solid #ddd !important; margin: 0 !important; white-space: pre; padding: 0 10px; line-height: inherit; }
.entry-content code { background-color: #fff5f5; color: #ff502c; font-size: .87em; padding: .065em .4em; margin: 0 4px }
.entry-content pre code { background: #000000; color: #fff; margin: 0; padding: .5em; }
.entry-content pre{ position: relative;}
.bg-primary { content: " "; position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d!important; width: 12px; height: 12px; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 12px;}
/* hljs代码高亮 */ .hljs-comment, .hljs-quote { color: #8e908c }
.hljs-deletion, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: #c82829 }
.hljs-built_in, .hljs-builtin-name, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: #f5871f }
.hljs-attribute { color: #eab700 }
.hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { color: #718c00 }
.hljs-section, .hljs-title { color: #4271ae }
.hljs-keyword, .hljs-selector-tag { color: #8959a8 }
.hljs { display: block; overflow-x: auto; background: #F1F3F3; color: #4d4d4c; padding: .5em; border-radius: 8px }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
替换为下面的样式代码:
.entry-content pre code {
position: relative;
display: block;
overflow-x: auto;
margin: 4.4px 0.px .4px 1px;
padding: 0;
max-height: 500px;
padding-left: 3.5em
}
.entry-content .code-toolbar pre code {
position: relative;
display: block;
overflow-x: auto;
margin: 4.4px 0.px .4px 1px;
padding: 0;
max-height: 500px;
padding-left: 3.5em
}
.entry-content pre {
padding: 0 !important;
margin: 0 !important;
border-radius: 0;
overflow: hidden
}
.bg-primary{ display: none;}
- 使用方法不变
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
原创文章,作者:天一,如若转载,请注明出处:https://tyiblog.com/teach/269.html