-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
131 lines (106 loc) · 3.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
max-width: 800px;
padding: 0 10px;
margin: 0 auto;
display: block;
}
.editor {
margin: 16px 0;
background-color: #fff;
padding: 16px;
border-radius: 8px;
height: 400px;
max-height: 300px;
white-space: pre-wrap;
overflow: auto;
}
</style>
<title>Unilight - Unicode Highlighter</title>
</head>
<body>
<div class="container">
<h1>Unilight</h1>
<p>
Unilight is a unicode highlighter: that means pure string code Highlighting for almost any languague.
It uses unicode variations, making possible to highlighted raw strings for any output that suports
unicode and its variations, for almoast any language. Useful to post code where there is no supoort
for rich editor or native highlighting.
</p>
<p>
If you want to highlight strings programatically, create your own highlighter, parse a source code
string and modify its tokens, derive a tool from this library or anything else, you may want to check
the <a href="https://github.com/felippe-regazio/unilight"><strong>Github Repository and Docs</strong></a>.
</p>
<h2>Warning</h2>
<p>This is a toy project and it was made for aesthetics only. Some of the cavets of a unicode highlighter are:</p>
<ol>
<li>Environments that does not support unicode can show a broken text</li>
<li>Since unicode variations are basically hidden chars, the String may be bigger then it looks</li>
<li>Interpreters Wont run the code because of the keywords will not be recognized </li>
<li>The unicode caracters may vary from one system to another </li>
</ol>
<br>
<!-- --------------- EDITOR --------------- -->
<main>
<h2>Unicode Highlighter</h2>
<form action="/">
<label>
Language:
<select name="language"></select>
</label>
</form>
<div class="editor" id="input" contentEditable role="textbox" tabindex="-1">
// This is an example
function example() {
const a = "fizz";
const b = "buzz";
return a+b;
}
</div>
<p>Output:</p>
<div class="editor" id="output" data-output role="textbox">
<!-- output automatically goes here -->
</div>
</main>
<p>Unilight was written by <a href="https://felipperegazio.com"><strong>Felippe Regazio</strong></a></p>
</div>
<script src="./dist/index.js"></script>
<script src="./keywords.js"></script>
<script>
// language selector behavior
const langSelect = document.querySelector('select[name=language]');
Object.keys(KEYWORDS_LIST).forEach(lang => {
const option = Object.assign(document.createElement('option'), {
value: lang,
selected: lang === 'javascript',
textContent: lang[0].toUpperCase()+lang.substring(1)
});
langSelect.append(option);
});
langSelect.onchange = () => convert();
</script>
<script>
// editor behavior
function convert() {
const language = document.querySelector('select[name=language]').value;
const input = document.getElementById('input').innerText;
const result = unilight.highlight(input, KEYWORDS_LIST[language]);
document.getElementById('output').innerText = result;
}
document.getElementById('input').oninput = () => convert();
convert();
</script>
</body>
</html>