LOADING

【Highlight.js】修改了一下主题,新增mac样式+行数显示功能

参考了其他小伙伴博客的样式,修复了一些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();
保存即可
:鹿乃_喜欢:

对于非本主题

请直接使用现成插件(doge) :huaji:
不过还是附上样式代码:


/*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"
  1. bear(Taki)说道:
    Google Chrome Windows 10

    :huaji9: 感谢kano佬

    1. kanokano说道:
      Google Chrome Windows 10

      不客气~

  2. liuliu怪说道:
    Google Chrome Windows 10

    666,学到了

    1. kanokano说道:
      Google Chrome Windows 10

      :鹿乃_比心:

回复 bear(Taki) 取消回复

电子邮件地址不会被公开。必填项已用 * 标注