diff options
Diffstat (limited to 'common/js/myhighlight.js')
-rw-r--r-- | common/js/myhighlight.js | 78 |
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的函数 | ||
4 | function 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的函数 | ||
13 | function 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供一键复制使用 | ||
26 | var 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 | |||
28 | for (let i in url) { | ||
29 | // 要求必须按顺序加载 | ||
30 | addScript(url[i], false); | ||
31 | } | ||
32 | |||
33 | // 加载高亮所需特殊css | ||
34 | addLink("https://www.qin-juan-ge-zhu.top/common/CSS/highlight.css"); | ||
35 | |||
36 | // 此处负责随机选择一个代码高亮style的css并加载 | ||
37 | // 数组内是现highlight.js所有插件名称,共计75个 | ||
38 | const 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 | |||
40 | const href = "https://www.qin-juan-ge-zhu.top/common/highlight/styles/" + styles[~~(Math.random() * styles.length)]; | ||
41 | addLink(href); | ||
42 | |||
43 | // 以下代码负责使用上述模块,因而必须在html文档整体完成之后加载 | ||
44 | onload = () => { | ||
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 | ||