CSS代码实时着色测试

马黑黑 发表于 2024-7-3 20:30

本帖最后由马黑黑于 2024-7-3 22:40 编辑 <br /><br /><style>
#hE { width: 740px; min-height: 400px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; -webkit-user-modify: read-write-plaintext-only; background: white; border: 1px solid gray; pre-wrap; word-break: break-word; overflow-x: hidden; overflow-y: auto; tab-size: 4; padding: 10px; margin: 10px auto; position: relative; }
#hE:empty::before { position: absolute; content: attr(data-placeholder); color: gray; }
.tMid { text-align: center; padding: 10px; }
::highlight(he-red) { color: red; }
::highlight(he-green) { color: green; }
::highlight(he-blue) { color: blue; }
::highlight(he-magenta) { color: magenta; }
::highlight(he-darkred) { color: darkred; }
</style>

<div id="hE" data-placeholder="请输入CSS代码"></div>
<p class="tMid"><button id="btnTest" type="button" value="test">着色效果重置</button></p>

<script>
(function() {
if(!CSS.highlights) {
hE.dataset.placeholder = '您的浏览器不支持CSS高亮伪元素';
return;
}

const regRed = /[@.#:]{1,}\w+-?\w+|+|\w+=/g;
const regGreen = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*|$/g;
const regBlue = /[\w-]+\s?:/g;
const regMagenta = /(["'])((?:\\\1|(?:(?!\1)).)*)(\1)/g;
const regDarkRed = /<.+?>/g;

var hls = [], regs = [];

let heColors = {
blue: regBlue,
red: regRed,
magenta: regMagenta,
green: regGreen,
darkred: regDarkRed,
};

const setHighlight = () => {
hls.length = regs.length = 0;
Object.keys(heColors).forEach(key => {
const hlColor = new Highlight();
hls.push(hlColor); //color
regs.push(heColors); //regix
CSS.highlights.set(`he-${key}`, hlColor);
});
};

const hlight = (ele) => {
if(CSS.highlights.size === 0) setHighlight();
//console.log(CSS.highlights.size);//测试
const walker = document.createTreeWalker(hE, NodeFilter.SHOW_TEXT);
while(walker.nextNode()) {
let textNode = walker.currentNode;
let text = textNode.textContent;
regs.forEach((reg,rkey) => {
let res = text.matchAll(reg);
res.forEach(r => {
const range = new Range();
range.setStart(textNode, r['index']);
range.setEnd(textNode, r['index'] + r.length);
hls.add(range);
});
});
}
};

hE.oninput = () => hlight(hE);

hE.onkeydown = (e) => {
if(e.keyCode !== 9) return;
e.preventDefault();
var sel = document.getSelection(),
range = sel.getRangeAt(0),
tabNode = document.createTextNode('\t');
range.insertNode(tabNode);
range.setStartAfter(tabNode);
range.setEndAfter(tabNode);
};

btnTest.onclick = () => {
CSS.highlights.clear();
hlight(hE);
hE.focus();
};
})();
</script>

马黑黑 发表于 2024-7-3 20:34

一楼输入框可输入（包括粘贴）CSS代码，输入当时，待关键字完整会立马着色。

脚本属测试范畴，目前仅通过正则进行着色，共五种关键字颜色。HTML代码、JS代码尚未支持但凡与CSS相同的关键字也一样着色。

打开页面时，如果你看到浏览器不支持CSS高亮伪元素字样，对不起，你无法看到CSS代码着色的效果。

马黑黑 发表于 2024-7-3 20:36

本帖最后由马黑黑于 2024-7-3 22:40 编辑

为便于学习、研究，公布一楼源码如下：
<style>
#hE { width: 800px; min-height: 400px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; -webkit-user-modify: read-write-plaintext-only; border: 1px solid gray; pre-wrap; word-break: break-word; overflow-x: hidden; overflow-y: auto; tab-size: 4; padding: 10px; margin: 10px auto; position: relative; }
#hE:empty::before { position: absolute; content: attr(data-placeholder); color: gray; }
.tMid { text-align: center; padding: 10px; }
::highlight(he-red) { color: red; }
::highlight(he-green) { color: green; }
::highlight(he-blue) { color: blue; }
::highlight(he-magenta) { color: magenta; }
::highlight(he-darkred) { color: darkred; }
</style>

<div id="hE" data-placeholder="请输入CSS代码"></div>
<p class="tMid"><button id="btnTest" type="button" value="test">着色效果重置</button></p>

<script>
(function() {
   if(!CSS.highlights) {
            hE.dataset.placeholder = '您的浏览器不支持CSS高亮伪元素';
            return;
   }
   //着色匹配正则
   const regRed = /[@.#:]{1,}\w+-?\w+\b|+|\w+=/g;
   const regGreen = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*|$/g;
   const regBlue = /[\w-]+\s?:/g;
   const regMagenta = /(["'])((?:\\\1|(?:(?!\1)).)*)(\1)/g;
   const regDarkRed = /<.+?>/g;

   var hls = [], regs = []; //高亮颜色数组&正则匹配数组

   //高亮颜色与匹配对象
   let heColors = {
            blue: regBlue,
            red: regRed,
            magenta: regMagenta,
            green: regGreen,
            darkred: regDarkRed,
   };

   //注册高亮
   const setHighlight = () => {
            hls.length = regs.length = 0;
            Object.keys(heColors).forEach(key => {
                     const hlColor = new Highlight();
                     hls.push(hlColor); //color
                     regs.push(heColors); //regix
                     CSS.highlights.set(`he-${key}`, hlColor);
            });
   };

   //着色
   const hlight = (ele) => {
            if(CSS.highlights.size === 0) setHighlight();
            //console.log(CSS.highlights.size);//测试
            const walker = document.createTreeWalker(hE, NodeFilter.SHOW_TEXT);
            while(walker.nextNode()) {
                     let textNode = walker.currentNode;
                     let text = textNode.textContent;
                     regs.forEach((reg,rkey) => {
                           let res = text.matchAll(reg);
                           res.forEach(r => {
                                    const range = new Range();
                                    range.setStart(textNode, r['index']);
                                    range.setEnd(textNode, r['index'] + r.length);
                                    hls.add(range);
                           });
                     });
            }
   };

   hE.oninput = () => hlight(hE);

   //Tab键输入
   hE.onkeydown = (e) => {
            if(e.keyCode !== 9) return;
            e.preventDefault();
            var sel = document.getSelection(),
                     range = sel.getRangeAt(0),
                     tabNode = document.createTextNode('\t');
                     range.insertNode(tabNode);
            range.setStartAfter(tabNode);
            range.setEndAfter(tabNode);
   };

   //着色效果重置
   btnTest.onclick = () => {
            CSS.highlights.clear();
            hlight(hE);
            hE.focus();
   };
})();
</script>

山人发表于 2024-7-3 20:48

评分后输入代码不能自动着色。

原因：需要重新注册高亮颜色——因为受到论坛的限制，高亮颜色未能在页面系统中进行永久注册。

评分后，点击文本框底部按钮着色功能恢复正常。

山人发表于 2024-7-3 20:52

支持的浏览器及其版本：

Chrome（含安卓版本） - Chromium 内核：105
Opera - 91
Safari - 17.2
三星浏览器 - 20

火狐浏览器（Firefox）目前尚未支持CSS高亮伪元素，但其官网基于CSS高亮伪元素的资料是最完备的。

红影发表于 2024-7-3 23:18

输入了一个帖子的代码，没看到着色啊。要么是我电脑不支持，要么是我弄错了{:4_173:}
是直接把代码全部黏贴进去么？

马黑黑 发表于 2024-7-4 07:30

红影发表于 2024-7-3 23:18
输入了一个帖子的代码，没看到着色啊。要么是我电脑不支持，要么是我弄错了
是直接把代码全部黏 ...

二楼、五楼都有解释

南无月 发表于 2024-7-4 09:15

马黑黑发表于 2024-7-3 20:34
一楼输入框可输入（包括粘贴）CSS代码，输入当时，待关键字完整会立马着色。

脚本属测试范畴，目前仅通 ...

这个实时着色效果很惊艳。。粘进去的同时就看到颜色了。。
我粘的是贴子代码，三大块结构的颜色标得清清楚楚。。{:4_199:}

南无月 发表于 2024-7-4 09:18

跟之前的对比一下，着色类型有细微差别。
比如这个所有数字都是同一种色。。之前连百分号一起同色。。
知道之前你的那个数字着色是什么意思了。。输入数字或文本，数字自动变色。{:4_173:}

南无月 发表于 2024-7-4 09:19

着色效果重置，点了，好象没啥变化。什么情况下用到它？

马黑黑 发表于 2024-7-4 12:13

南无月发表于 2024-7-4 09:19
着色效果重置，点了，好象没啥变化。什么情况下用到它？

乱套的时候

马黑黑 发表于 2024-7-4 12:14

南无月发表于 2024-7-4 09:15
这个实时着色效果很惊艳。。粘进去的同时就看到颜色了。。
我粘的是贴子代码，三大块结构的颜色标得清清 ...

这里的着色设计还没有考虑到 HTML代码和JS代码

马黑黑 发表于 2024-7-4 12:15

南无月发表于 2024-7-4 09:18
跟之前的对比一下，着色类型有细微差别。
比如这个所有数字都是同一种色。。之前连百分号一起同色。。
...

这个差别应该比较大的。之前的着色理念，参考的是 Emeditor，现在的设计，参考更多的新潮代码编辑器。

南无月 发表于 2024-7-4 12:17

马黑黑发表于 2024-7-4 12:13
乱套的时候

目前试了几次都不乱。。咋整比较乱套{:4_170:}

马黑黑 发表于 2024-7-4 12:17

南无月发表于 2024-7-4 12:17
目前试了几次都不乱。。咋整比较乱套

现在这个可能不乱，因为着色设计相对简单

南无月 发表于 2024-7-4 12:18

马黑黑发表于 2024-7-4 12:14
这里的着色设计还没有考虑到 HTML代码和JS代码

原黑色的那一部分么

南无月 发表于 2024-7-4 12:19

马黑黑发表于 2024-7-4 12:15
这个差别应该比较大的。之前的着色理念，参考的是 Emeditor，现在的设计，参考更多的新潮代码编辑器。

老师的工具就是越做越新潮。。。。{:4_199:}

马黑黑 发表于 2024-7-4 12:20

南无月发表于 2024-7-4 12:18
原黑色的那一部分么

就是说，这里的着色设计只是作为测试，而且只是针对CSS代码。

因为时间紧，HTML、JS的伪元素高亮着色设计还没有做。

马黑黑 发表于 2024-7-4 12:20

南无月发表于 2024-7-4 12:19
老师的工具就是越做越新潮。。。。

不过只是做着玩玩，因为浏览器的支持问题，目前这个还不能用于生产环境

南无月 发表于 2024-7-4 12:48

马黑黑发表于 2024-7-4 12:20
就是说，这里的着色设计只是作为测试，而且只是针对CSS代码。

因为时间紧，HTML、JS的伪元素高亮着色 ...

好哒，还有更好的更优的在后头{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

CSS代码实时着色测试