Post Detail

Post #89

Code Highlight !!!

Code Highlight !

Now code can be highlighted like this:

 1/// Head
 2let url = new URL(window.location.href);
 3
 4var eee = url.searchParams.get('e');
 5var loop = url.searchParams.get('LL') || false;
 6
 7var isTrueSet = loop == 'true';
 8
 9if (!eee) {
10    isTrueSet = false;
11}
12
13
14/// Body
15let e = document.querySelector('[e]');
16
17let str = 'R';
18let strRepeat = 'E';
19
20let bgColor = 'red';
21let color = 'yellow';
22
23let title = 'Kheee';
24
25text();
26
27function text() {
28    switch (eee) {
29        case 'e':
30            strRepeat = 'e';
31
32            strChange(str, strRepeat, false, false, true);
33            break;
34
35        case 'voilà':
36            str = 'VOIL';
37            strRepeat = 'À';
38
39            bgColor = 'purple';
40            color = 'gold';
41
42            strChange(str, strRepeat, false, false, false);
43            break;
44
45        default:
46            if (isTrueSet) {
47                str = eee;
48                strRepeat = eee;
49
50                strChange(str, strRepeat, false, true, false);
51            } else {
52                strChange(str, strRepeat, true, false, false);
53            }
54    }
55}
56
57function strChange(str, strRepeat, isREEE, isLL, isE) {
58    if (!isREEE) {
59        title = str + strRepeat;
60    }
61
62    if (isLL) {
63        title = str;
64    }
65
66    if (!isE) {
67        document.title = title;
68        e.innerHTML = e.innerHTML.replace('e', str);
69        changeColor(bgColor, color);
70    }
71
72    clock(strRepeat);
73}
74
75function clock(strRepeat) {
76    setInterval(() => {
77        e.innerHTML += strRepeat;
78    }, 1);
79}
80
81function changeColor(bgColor, color) {
82    e.style.backgroundColor = bgColor;
83    e.style.color = color;
84}

This is the code from Kheee, only the Javascript, I know it’s not the best way to do it but it’s because when I first made it I was learning stuff and decided to do it a this way, and then I kept it and just updated it with new things later, and to be honest I kinda like it 😂

And I have 500 different languages I can highlight.

It took months, why ?

Well… Idk why I never checked the Network after adding the extension doing this… but they actually don’t provide a CSS by default… and I just never read THE EXACT LINE saying it 😂

So now I added this CSS and it uses Palenight Dark, but I’d want it to be Shades of Purple… sadly I need to make it myself since nobody did at the moment and I know how… it’s just a long work since I have to make it look good, so I’ll do it at some point… or never