summaryrefslogtreecommitdiffstats
path: root/common/js/myhighlight.js
diff options
context:
space:
mode:
Diffstat (limited to 'common/js/myhighlight.js')
-rw-r--r--common/js/myhighlight.js78
1 files changed, 0 insertions, 78 deletions
diff --git a/common/js/myhighlight.js b/common/js/myhighlight.js
deleted file mode 100644
index 826c14d..0000000
--- a/common/js/myhighlight.js
+++ /dev/null
@@ -1,78 +0,0 @@
1// 代码高亮、加行号、加一键复制功能
2
3// 加js的函数
4function addScript(url, async = true) {
5 //默认先到先得地加载
6 const script = document.createElement('script');
7 script.src = url;
8 script.async = async;
9 document.head.appendChild(script);
10}
11
12// 加link的函数
13function addLink(href, rel = 'stylesheet') {
14 // 默认为stylesheet
15 const link = document.createElement('link');
16 link.rel = rel;
17 link.href = href;
18 document.head.appendChild(link);
19}
20
21// 此处是各个插件
22// 首先放置最高的jQuery备用
23// 而后是highlight.min.js高亮代码
24// 再加行号
25// 最后cliploard供一键复制使用
26var url = ["https://www.qin-juan-ge-zhu.top/common/js/jQuery.js", "https://www.qin-juan-ge-zhu.top/common/highlight/highlight.min.js", "https://www.qin-juan-ge-zhu.top/common/highlight/plugs/highlightjs-line-numbers.js", "https://www.qin-juan-ge-zhu.top/common/highlight/plugs/clipboard.min.js"]
27
28for (let i in url) {
29 // 要求必须按顺序加载
30 addScript(url[i], false);
31}
32
33// 加载高亮所需特殊css
34addLink("https://www.qin-juan-ge-zhu.top/common/CSS/highlight.css");
35
36// 此处负责随机选择一个代码高亮style的css并加载
37// 数组内是现highlight.js所有插件名称,共计75个
38const styles = ["a11y-dark.min.css", "a11y-light.min.css", "agate.min.css", "androidstudio.min.css", "an-old-hope.min.css", "arduino-light.min.css", "arta.min.css", "ascetic.min.css", "atom-one-dark.min.css", "atom-one-dark-reasonable.min.css", "atom-one-light.min.css", "base16", "brown-paper.min.css", "brown-papersq.png", "codepen-embed.min.css", "color-brewer.min.css", "dark.min.css", "default.min.css", "devibeans.min.css", "docco.min.css", "far.min.css", "felipec.min.css", "foundation.min.css", "github-dark-dimmed.min.css", "github-dark.min.css", "github.min.css", "gml.min.css", "googlecode.min.css", "gradient-dark.min.css", "gradient-light.min.css", "grayscale.min.css", "hybrid.min.css", "idea.min.css", "intellij-light.min.css", "ir-black.min.css", "isbl-editor-dark.min.css", "isbl-editor-light.min.css", "kimbie-dark.min.css", "kimbie-light.min.css", "lightfair.min.css", "lioshi.min.css", "magula.min.css", "mono-blue.min.css", "monokai.min.css", "monokai-sublime.min.css", "night-owl.min.css", "nnfx-dark.min.css", "nnfx-light.min.css", "nord.min.css", "obsidian.min.css", "panda-syntax-dark.min.css", "panda-syntax-light.min.css", "paraiso-dark.min.css", "paraiso-light.min.css", "pojoaque.jpg", "pojoaque.min.css", "purebasic.min.css", "qtcreator-dark.min.css", "qtcreator-light.min.css", "rainbow.min.css", "routeros.min.css", "school-book.min.css", "shades-of-purple.min.css", "srcery.min.css", "stackoverflow-dark.min.css", "stackoverflow-light.min.css", "sunburst.min.css", "tokyo-night-dark.min.css", "tokyo-night-light.min.css", "tomorrow-night-blue.min.css", "tomorrow-night-bright.min.css", "vs2015.min.css", "vs.min.css", "xcode.min.css", "xt256.min.css"];
39
40const href = "https://www.qin-juan-ge-zhu.top/common/highlight/styles/" + styles[~~(Math.random() * styles.length)];
41addLink(href);
42
43// 以下代码负责使用上述模块,因而必须在html文档整体完成之后加载
44onload = () => {
45 // 导出的源码由<pre><code>……</code></pre>包裹,符合highlight.min.js要求
46 // 需要在code之前加入复制按钮,要求点击之后显示已复制
47 var allpre = document.getElementsByTagName("pre");
48 for (i = 0; i < allpre.length; i++) {
49 var onepre = document.getElementsByTagName("pre")[i];
50 var mycode = document.getElementsByTagName("pre")[i].innerHTML;
51 onepre.innerHTML = '<div class="btn"><span class="btn-tip">已复制!</span><button class="btn" data-clipboard-action="copy">复制</button></div>' + mycode;
52 };
53
54 // 这两行负责加载代码高亮并为代码添加行号
55 hljs.initHighlightingOnLoad();
56 hljs.initLineNumbersOnLoad();
57
58 // 循环为pre标签加id
59 $("pre").each(function () {
60 $(this).attr('id', "pre" + $(this).index());
61 var btns = $(this).find("button");
62 $(btns).attr('data-clipboard-target', "#pre" + $(this).index())
63 });
64 var clipboard = new ClipboardJS('.btn');
65
66 // 是否成功复制
67 clipboard.on('success', function (e) {
68 $(".btn").each(function () {
69 var btntip = $(this).find("span.btn-tip");
70 $(btntip).css("display", "block").delay(1000).fadeOut(200);
71 });
72 console.log(e);
73 });
74
75 clipboard.on('error', function (e) {
76 console.log(e);
77 });
78}; \ No newline at end of file