mathpix-markdown-it 2.0.9 → 2.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/doc/icons/color-icons-render.html +30 -5
- package/doc/icons/color-icons.html +8534 -53618
- package/doc/icons/icons.md +5 -1
- package/doc/icons/table-of-icons-render.html +249 -0
- package/doc/icons/table-of-icons.html +23729 -0
- package/es5/bundle.js +7 -7
- package/es5/index.js +5 -5
- package/lib/helpers/icons/fa-icons.js +116 -1
- package/lib/helpers/icons/fa-icons.js.map +1 -1
- package/lib/helpers/icons/unicode-icons.js +180 -0
- package/lib/helpers/icons/unicode-icons.js.map +1 -1
- package/lib/markdown/md-latex-footnotes/render-rule.js +2 -1
- package/lib/markdown/md-latex-footnotes/render-rule.js.map +1 -1
- package/lib/mathpix-markdown-model/index.d.ts +1 -0
- package/lib/mathpix-markdown-model/index.js.map +1 -1
- package/package.json +1 -1
package/doc/icons/icons.md
CHANGED
|
@@ -7,4 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
## Color icons
|
|
9
9
|
|
|
10
|
-
- [Color icons](https://htmlpreview.github.io/?https://github.com/Mathpix/mathpix-markdown-it/blob/dev/olga/add-
|
|
10
|
+
- [Color icons](https://htmlpreview.github.io/?https://github.com/Mathpix/mathpix-markdown-it/blob/dev/olga/13534-Request-to-add-some-icons-v1/doc/icons/color-icons.html)
|
|
11
|
+
|
|
12
|
+
## Table of icons
|
|
13
|
+
|
|
14
|
+
- [Table of icons](https://htmlpreview.github.io/?https://github.com/Mathpix/mathpix-markdown-it/blob/dev/olga/13534-Request-to-add-some-icons-v1/doc/icons/table-of-icons.html)
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Dynamic Flex Table with Modal</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
height: 100vh;
|
|
13
|
+
background-color: #f5f5f5;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
}
|
|
16
|
+
.container {
|
|
17
|
+
max-width: 1200px;
|
|
18
|
+
overflow: auto;
|
|
19
|
+
}
|
|
20
|
+
.table {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
gap: 5px;
|
|
24
|
+
border: 2px solid black;
|
|
25
|
+
padding: 10px;
|
|
26
|
+
background: white;
|
|
27
|
+
}
|
|
28
|
+
.cell {
|
|
29
|
+
flex: 1;
|
|
30
|
+
font-size: 30px;
|
|
31
|
+
min-width: 50px;
|
|
32
|
+
max-width: 50px;
|
|
33
|
+
padding: 8px;
|
|
34
|
+
text-align: center;
|
|
35
|
+
background: lightgray;
|
|
36
|
+
border: 1px solid black;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: background 0.2s;
|
|
39
|
+
flex-grow: 0;
|
|
40
|
+
}
|
|
41
|
+
.cell:hover {
|
|
42
|
+
background: darkgray;
|
|
43
|
+
}
|
|
44
|
+
.modal {
|
|
45
|
+
display: none;
|
|
46
|
+
position: fixed;
|
|
47
|
+
top: 0;
|
|
48
|
+
left: 0;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
background: rgba(0, 0, 0, 0.5);
|
|
52
|
+
justify-content: center;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
.modal-content {
|
|
56
|
+
background: white;
|
|
57
|
+
padding: 20px;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
text-align: center;
|
|
60
|
+
position: relative;
|
|
61
|
+
}
|
|
62
|
+
.row {
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: baseline;
|
|
65
|
+
justify-content: left;
|
|
66
|
+
gap: 5px;
|
|
67
|
+
padding: 5px 0;
|
|
68
|
+
}
|
|
69
|
+
code {
|
|
70
|
+
background: #f0f0f4;
|
|
71
|
+
}
|
|
72
|
+
.close {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: 10px;
|
|
75
|
+
right: 15px;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
font-size: 20px;
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
}
|
|
80
|
+
#modal-description #setText {
|
|
81
|
+
text-align: left;
|
|
82
|
+
}
|
|
83
|
+
#loading.hide {
|
|
84
|
+
display: none;
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
87
|
+
</head>
|
|
88
|
+
<body>
|
|
89
|
+
<div id="loading">Loading...</div>
|
|
90
|
+
<div class="container">
|
|
91
|
+
<div id="table" class="table"></div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div id="modal" class="modal">
|
|
95
|
+
<div class="modal-content">
|
|
96
|
+
<span class="close">×</span>
|
|
97
|
+
<h2 id="modal-title"></h2>
|
|
98
|
+
<p id="modal-description"></p>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<script>
|
|
103
|
+
let script = document.createElement('script');
|
|
104
|
+
script.src = "../../es5/bundle.js";
|
|
105
|
+
document.head.append(script);
|
|
106
|
+
|
|
107
|
+
script.onload = function() {
|
|
108
|
+
const isLoaded = window.loadMathJax();
|
|
109
|
+
if (isLoaded) {
|
|
110
|
+
console.log('Styles loaded!');
|
|
111
|
+
const data = [];
|
|
112
|
+
const iconsData = [];
|
|
113
|
+
const color = 'red';
|
|
114
|
+
for (let i = 0; i < window.icons.unicodeIcons.length; i++) {
|
|
115
|
+
let item = window.icons.unicodeIcons[i];
|
|
116
|
+
data.push({...item})
|
|
117
|
+
let name = item.alias ? item.alias : item.name;
|
|
118
|
+
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
|
|
119
|
+
let textContent = `\\icon{${name}}`;
|
|
120
|
+
let mathContent = `$\\icon{${name}}$`;
|
|
121
|
+
let nameColorContent = `\\icon{${nameColor}}`;
|
|
122
|
+
let colorContent = `\\icon{${name} ${color}}`;
|
|
123
|
+
iconsData.push({
|
|
124
|
+
name: name,
|
|
125
|
+
textContent: textContent,
|
|
126
|
+
textHtml: window.markdownToHTML(textContent),
|
|
127
|
+
mathContent: mathContent,
|
|
128
|
+
mathHtml: window.markdownToHTML(mathContent),
|
|
129
|
+
nameColorContent: nameColorContent,
|
|
130
|
+
nameColorHtml: window.markdownToHTML(nameColorContent),
|
|
131
|
+
colorContent: colorContent,
|
|
132
|
+
colorHtml: window.markdownToHTML(colorContent)
|
|
133
|
+
})
|
|
134
|
+
}
|
|
135
|
+
for (let i = 0; i < window.icons.squaredIcons.length; i++) {
|
|
136
|
+
let item = window.icons.squaredIcons[i];
|
|
137
|
+
data.push({...item})
|
|
138
|
+
let name = item.alias ? item.alias : item.name;
|
|
139
|
+
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
|
|
140
|
+
let textContent = `\\icon{${name}}`;
|
|
141
|
+
let mathContent = `$\\icon{${name}}$`;
|
|
142
|
+
let nameColorContent = `\\icon{${nameColor}}`;
|
|
143
|
+
let colorContent = `\\icon{${name} ${color}}`;
|
|
144
|
+
iconsData.push({
|
|
145
|
+
name: name,
|
|
146
|
+
textContent: textContent,
|
|
147
|
+
textHtml: window.markdownToHTML(textContent),
|
|
148
|
+
mathContent: mathContent,
|
|
149
|
+
mathHtml: window.markdownToHTML(mathContent),
|
|
150
|
+
nameColorContent: nameColorContent,
|
|
151
|
+
nameColorHtml: window.markdownToHTML(nameColorContent),
|
|
152
|
+
colorContent: colorContent,
|
|
153
|
+
colorHtml: window.markdownToHTML(colorContent)
|
|
154
|
+
})
|
|
155
|
+
}
|
|
156
|
+
for (let i = 0; i < window.icons.faIcons.length; i++) {
|
|
157
|
+
let item = window.icons.faIcons[i];
|
|
158
|
+
data.push({...item, textOnly: true})
|
|
159
|
+
let name = item.alias ? item.alias : item.name;
|
|
160
|
+
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
|
|
161
|
+
let textContent = `\\icon{${name}}`;
|
|
162
|
+
let nameColorContent = `\\icon{${nameColor}}`;
|
|
163
|
+
let colorContent = `\\icon{${name} ${color}}`;
|
|
164
|
+
iconsData.push({
|
|
165
|
+
name: name,
|
|
166
|
+
textContent: textContent,
|
|
167
|
+
textHtml: window.markdownToHTML(textContent),
|
|
168
|
+
nameColorContent: nameColorContent,
|
|
169
|
+
nameColorHtml: window.markdownToHTML(nameColorContent),
|
|
170
|
+
colorContent: colorContent,
|
|
171
|
+
colorHtml: window.markdownToHTML(colorContent),
|
|
172
|
+
textOnly: true
|
|
173
|
+
})
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
for (let i = 0; i < window.icons.emojiIcons.length; i++) {
|
|
177
|
+
let item = window.icons.emojiIcons[i];
|
|
178
|
+
data.push({...item})
|
|
179
|
+
let name = item.alias ? item.alias : item.name;
|
|
180
|
+
let textContent = `\\icon{${name}}`;
|
|
181
|
+
let emojiContent = `\\icon{${name} emoji}`;
|
|
182
|
+
let mathContent = item.textOnly ? '' : `$\\icon{${name}}$`;
|
|
183
|
+
let colorContent = `\\icon{${name} ${color}}`;
|
|
184
|
+
iconsData.push({
|
|
185
|
+
name: name,
|
|
186
|
+
symbol: item.symbol,
|
|
187
|
+
textContent: textContent,
|
|
188
|
+
textHtml: window.markdownToHTML(textContent),
|
|
189
|
+
emojiContent: emojiContent,
|
|
190
|
+
emojiHtml: window.markdownToHTML(emojiContent),
|
|
191
|
+
mathContent: mathContent,
|
|
192
|
+
mathHtml: mathContent ? window.markdownToHTML(mathContent) : '',
|
|
193
|
+
colorContent: colorContent,
|
|
194
|
+
colorHtml: window.markdownToHTML(colorContent)
|
|
195
|
+
})
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
console.log("[TEST]=>iconsData=>", iconsData)
|
|
199
|
+
console.log("[TEST]=>iconsData=>", JSON.stringify(iconsData, null, 2))
|
|
200
|
+
|
|
201
|
+
const table = document.getElementById("table");
|
|
202
|
+
const modal = document.getElementById("modal");
|
|
203
|
+
const modalTitle = document.getElementById("modal-title");
|
|
204
|
+
const modalDescription = document.getElementById("modal-description");
|
|
205
|
+
const closeModal = document.querySelector(".close");
|
|
206
|
+
|
|
207
|
+
for (let i = 0; i < iconsData.length; i++) {
|
|
208
|
+
let item = iconsData[i];
|
|
209
|
+
const cell = document.createElement("div");
|
|
210
|
+
cell.className = "cell";
|
|
211
|
+
let name = item.name;
|
|
212
|
+
cell.innerHTML = item.emojiHtml ? item.emojiHtml : item.textHtml;
|
|
213
|
+
cell.title = name;
|
|
214
|
+
cell.addEventListener("click", () => {
|
|
215
|
+
modalTitle.innerHTML = item.textHtml + `<br>` + item.name;
|
|
216
|
+
let iconContentHtml = '<div class="row">' + `<strong>Text mode:</strong> ` + `<code>${item.textContent}</code> ` + item.textHtml + '</div>';
|
|
217
|
+
if (item.mathContent) {
|
|
218
|
+
iconContentHtml += '<div class="row">' +`<strong>Math mode:</strong> ` + `<code>${item.mathContent}</code> ` + item.mathHtml + '</div>';
|
|
219
|
+
}
|
|
220
|
+
if (item.emojiContent) {
|
|
221
|
+
iconContentHtml += '<div class="row">' +`<strong>Emoji:</strong> ` + `<code>${item.emojiContent}</code> ` + item.emojiHtml + '</div>';
|
|
222
|
+
}
|
|
223
|
+
iconContentHtml += "<h3>Colors:</h3>";
|
|
224
|
+
if (item.nameColorContent) {
|
|
225
|
+
iconContentHtml += '<div class="row">' +`<code>${item.nameColorContent}</code> ` + item.nameColorHtml + '</div>';
|
|
226
|
+
}
|
|
227
|
+
iconContentHtml += '<div class="row">' +`<code>${item.colorContent}</code> ` + item.colorHtml + '</div>';
|
|
228
|
+
modalDescription.innerHTML = iconContentHtml;
|
|
229
|
+
modal.style.display = "flex";
|
|
230
|
+
});
|
|
231
|
+
table.appendChild(cell);
|
|
232
|
+
}
|
|
233
|
+
const loading = document.getElementById('loading');
|
|
234
|
+
loading.classList.add('hide')
|
|
235
|
+
|
|
236
|
+
closeModal.addEventListener("click", () => {
|
|
237
|
+
modal.style.display = "none";
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
window.addEventListener("click", (event) => {
|
|
241
|
+
if (event.target === modal) {
|
|
242
|
+
modal.style.display = "none";
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
</script>
|
|
248
|
+
</body>
|
|
249
|
+
</html>
|