Typecho中代码高亮并有Mac风格
三步：
- 下载prism文件。
- 在head中引用，并添加行号类。
- 修改CSS。
第一步：官网下载，选择语言和需要的插件
易得
第二步：header.php文件的head块中添加如下代码
<!-- 为pre块添加 line-numbers 类 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var codeBlocks = document.querySelectorAll('.post-content pre:not(.line-numbers)');
codeBlocks.forEach(function (codeBlock) {
codeBlock.classList.add('line-numbers');
});
});
</script>
<!-- prism 代码高亮&主题选择 -->
<!-- 注意prismjs_theme 是我在function文件中定义的 -->
<?php if ($this->options->prismjs_theme == 'tomorrow') : ?>
<link rel="stylesheet" href="<?php $this->options->themeUrl('替换为你的prism.css的路径，下同'); ?>" />
<script src="<?php $this->options->themeUrl('替换为你的prism.js的路径，下同'); ?>"></script>
<?php elseif ($this->options->prismjs_theme == 'coy') : ?>
<link rel="stylesheet" href="<?php $this->options->themeUrl('prismjs/coy/prism.css'); ?>" />
<script src="<?php $this->options->themeUrl('prismjs/coy/prism.js'); ?>"></script>
<?php endif; ?>
<!-- 修改为mac样式,请替换你的mac.css文件路径-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/mac.css'); ?>" />第三步：修改满意的CSS
下面只写了mac.css文件。
注意，我的效果也修改了下载了prism.css文件。
更具体的css可以参考我的github仓库，该主题是开源的。
/* macOS 风格的代码框样式 */
pre[class*=language-] {
position: relative;
padding: 20px;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
transition: box-shadow 0.3s ease-in-out;
max-height: 100%;
max-width: 85%;
padding-top: 50px;
}
/* macOS 风格的图标 */
pre[class*=language-]::before {
content: "";
position: absolute;
background: url("../img/icon_mac.svg");
background-position-y: center;
top: 15px;
left: 20px;
height: 14px;
width: 54px;
margin-left: 5px;
display: block;
}
/* 悬浮 */
pre[class*=language-]:hover {
box-shadow: 0 25px 15px rgba(0, 0, 0, 0.2);
}
