- 参考了其他小伙伴博客的样式，修复了一些bug
- 因为主题使用的ajax等奇奇怪怪的原因，导致无法很方便地使用prism.js，所以只能使用 highlight.js 进行语法高亮
- 代码高亮基于highlight.js
- 代码行数显示基于highlightjs-line-numbers.js
- 复制模块基于clipboard.js
- 鹿乃_AWSL:
附上修改方法：
对于本主题
1.首先下载 theme.min.js ,并覆盖到主题目录/static/js/ 下
2.更改CSS样式：下载 kratos.min.css ,并覆盖到主题目录/static/css/ 下
3.修改主题目录/static/js/kratos.js
搜索 hljs.initHighlightingOnLoad();
并在其后添加：
codecopy_func();
hljs.initLineNumbersOnLoad();
之后搜索：kratos_pjax_reload
并在函数内最后添加：
codecopy_func();
hljs.initLineNumbersOnLoad();
保存即可
2.更改CSS样式：下载 kratos.min.css ,并覆盖到主题目录/static/css/ 下
3.修改主题目录/static/js/kratos.js
搜索 hljs.initHighlightingOnLoad();
并在其后添加：
codecopy_func();
hljs.initLineNumbersOnLoad();
之后搜索：kratos_pjax_reload
并在函数内最后添加：
codecopy_func();
hljs.initLineNumbersOnLoad();
保存即可
对于非本主题
请直接使用现成插件（doge） 
不过还是附上样式代码：
不过还是附上样式代码：
/*codecopy*/
.codecopy-btn {position: absolute;transition: all 0.5s;top: 10px;right: 20px;width: 90px;border-radius: 5px;background-color: rgba(221,221,221,.1);color: #999;text-align: center;font-weight: 700;font-size: 14px}
.codecopy-btn:hover {background-color: rgba(221,221,221,.2);top:9px}
/*语法高亮*/
.hljs{position:relative;display:block;overflow-x:hidden;background:#21252B;color:#999;padding:30px 5px 2px 5px;box-shadow: 0 10px 30px 0px rgb(0 0 0 / 40%)}
.hljs::before{content:"";position:absolute;left:15px;top:10px;overflow:visible;width:12px;height:12px;border-radius:16px;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;-webkit-box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;background-color:#fc625d;white-space:nowrap;text-indent: 75px;font-size: 16px;line-height: 12px;font-weight: 700}
.hljs-ln{display:inline-block;overflow-x:auto;padding-bottom:5px}
.hljs-ln td {padding: 0;background-color: #21252B}
.hljs-ln::-webkit-scrollbar {height: 10px;border-radius: 5px;background: #333;}
.hljs-ln::-webkit-scrollbar-thumb {background-color: #bbb;border-radius: 5px;}
.hljs-ln::-webkit-scrollbar-thumb:hover {background: #ddd;}
.hljs table tbody tr{border:none}
.hljs .hljs-ln-line {padding: 1px 10px;border:none}
td.hljs-ln-line.hljs-ln-numbers {border-right: 1px solid #666;}
.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name{color:#569cd6}
.hljs-link{color:#569cd6;text-decoration:underline}
.hljs-built_in,.hljs-type{color:#4ec9b0}
.hljs-number,.hljs-class{color:#b8d7a3}
.hljs-string,.hljs-meta-string{color:#d69d85}
.hljs-regexp,.hljs-template-tag{color:#9a5334}
.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:#dcdcdc}
.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}
.hljs-doctag{color:#608b4e}
.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:#9b9b9b}
.hljs-variable,.hljs-template-variable{color:#bd63c5}
.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:#9cdcfe}
.hljs-section{color:gold}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:bold}
.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#d7ba7d}
.hljs-addition{background-color:#144212;display:inline-block;width:100%}
.hljs-deletion{background-color:#600;display:inline-block;width:100%}
.hljs.language-html::before,.hljs.language-xml::before{content:"HTML/XML"}
.hljs.language-javascript::before{content:"JavaScript"}
.hljs.language-c::before{content:"C"}
.hljs.language-cpp::before{content:"C++"}
.hljs.language-java::before{content:"Java"}
.hljs.language-asp::before{content:"ASP"}
.hljs.language-actionscript::before{content:"ActionScript/Flash/Flex"}
.hljs.language-bash::before{content:"Bash"}
.hljs.language-css::before{content:"CSS"}
.hljs.language-asp::before{content:"ASP"}
.hljs.language-cs::before,
.hljs.language-csharp::before{content:"C#"}
.hljs.language-d::before{content:"D"}
.hljs.language-golang::before,.hljs.language-go::before{content:"Go"}
.hljs.language-json::before{content:"JSON"}
.hljs.language-lua::before{content:"Lua"}
.hljs.language-less::before{content:"LESS"}
.hljs.language-md::before,
.hljs.language-markdown::before,
.hljs.language-mkdown::before,
.hljs.language-mkd::before{content:"Markdown"}
.hljs.language-mm::before,
.hljs.language-objc::before,
.hljs.language-obj-c::before,
.hljs.language-objective-c::before{content:"Objective-C"}
.hljs.language-php::before{content:"PHP"}
.hljs.language-perl::before,
.hljs.language-pl::before,
.hljs.language-pm::before{content:"Perl"}
.hljs.language-python::before,
.hljs.language-py::before,
.hljs.language-gyp::before,
.hljs.language-ipython::before{content:"Python"}
.hljs.language-r::before{content:"R"}
.hljs.language-ruby::before,
.hljs.language-rb::before,
.hljs.language-gemspec::before,
.hljs.language-podspec::before,
.hljs.language-thor::before,
.hljs.language-irb::before{content:"Ruby"}
.hljs.language-sql::before{content:"SQL"}
.hljs.language-sh::before,
.hljs.language-shell::before,
.hljs.language-Session::before,
.hljs.language-shellsession::before,
.hljs.language-console::before{content:"Shell"}
.hljs.language-swift::before{content:"Swift"}
.hljs.language-vb::before{content:"VB/VBScript"}
.hljs.language-yaml::before{content:"YAML"}
复制按钮实现：
//摘自CSDN
/*生成复制按钮*/
//复制按钮
function codecopy_func() {
const btn = '复制';
//获取所有的代码区域的pre元素节点
const codecopys = document.getElementsByTagName('pre');
//遍历DOM（pre节点）节点
for (let i = 0; i < codecopys.length; i++) {
//pre元素对象
let codecopy = codecopys[i];
//生成复制按钮
let html_temp = btn.replace(/index/g, i);
//找到code元素，并添加id属性，id的值和复制按钮的属性 data-clipboard-target 的值是一样的
//判断pre标签内是否含有code标签，如是则执行
if(codecopy.firstChild.localName == 'code') {
codecopy.firstChild.id = 'code_' + i;
//将复制按钮追加至页面
let html = codecopy.innerHTML + html_temp;
codecopy.innerHTML = html;
}
}
/*初始化复制功能*/
const clipboardJs = new ClipboardJS('.codecopy-btn'); //注意：ClipboardJS替代了Clipboard
/*复制失败事件*/
clipboardJs.on('error', function(e) {
console.log(e);
});
}
效果
内容
#include
int main()
{
printf("Hello, World");
return(0);
}
#include
int main()
{
std::cout << "Hello World";
return 0;
}using System;
class Program
{
public static void Main(string[] args)
{
Console.WriteLine("Hello, World");
}
}function printHello(printString)
print(printString)
end
printHello("Hello World!")
echo "Hello, World"
<p>Hello, World</p>
<? echo "helloworld">
public class Main {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
document.write('Hello, World');
#import
#import
int main(void)
{
NSLog(@"Hello, World");
return 0;
}
cat('Hello, World')
MsgBox "Hello, World"
print ("Hello, World")
print("Hello, World")
puts "Hello, World"
发表回复
不客气~
666，学到了