Greasy Fork is available in English.

CC98 HighLight

highlight code in www.cc98.org

ئاپتورى
Slowist-Lee
بۈگۈن قاچىلانغىنى
0
جەمئىي قاچىلانغىنى
3
باھا نومۇرى
1 0 0
نەشرى
2.2
قۇرۇلغان ۋاقتى
2024-09-28
يېڭىلانغان ۋاقتى
2024-09-28
ئىجازەتنامىسى
Apache 2.0
قوللايدىغىنى

CC98内代码编辑器的优化工具,可以对代码进行高亮,并且添加复制按钮。
自定义界面:

高亮风格选择

可以通过修改style.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/kimbie-light.min.css';进行自定义。
highlight.js给的官方的demo在: https://highlightjs.org/demo 在这里可以选择你想要的样式并且预览。找到你喜欢的样式,记住名字,然后在https://cdnjs.com/libraries/highlight.js/11.7.0 内可以找到cdn服务器储存的css文件,这样调用速度比在github上快很多。
我们以我这里用的kimbie-light.min.css为例: 我们先在https://highlightjs.org/demo中预览,之后我们CTRL+F在https://cdnjs.com/libraries/highlight.js/11.7.0内进行搜索,点击左侧的link图标,复制对应的url: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/kimbie-light.min.css
放入对应的引用的位置即可~

按钮样式设置

可以在以下代码片段中根据代码的意义及注释修改~

const copyButton = document.createElement('button');
copyButton.textContent = 'Copy'; //modify the text
copyButton.style.position = 'absolute';
copyButton.style.top = '5px';
copyButton.style.zIndex = '9999'; //ensure it's on the top
copyButton.style.backgroundColor = '#E8E8E8';  //modify RGB to change the color of the button
copyButton.style.color = '#616161';  //modify RGB to change the color of the text
copyButton.style.cursor = 'pointer';
copyButton.style.padding = '5px 10px';
copyButton.style.border = 'none';
copyButton.style.borderRadius = '3px';

未解决的问题

目前加载时还是有点卡顿,感觉是highlight.js的延时导致。本来想用动态DOM检测,但实际测试中发现highlight不知道为什么总是会卡顿……


第一次磕磕碰碰的写这种脚本,写的有点冗杂/乱七八糟,请见谅。
github地址:https://github.com/Slowist-Lee/CC98Opitimize/tree/op1-highlight,一些学习的磕磕碰碰的想法也放在里面QAQ
欢迎使用,欢迎PR!不胜感激 qwq