mathpix-markdown-it
Version:
Mathpix-markdown-it is an open source implementation of the mathpix-markdown spec written in Typescript. It relies on the following open source libraries: MathJax v3 (to render math with SVGs), markdown-it (for standard Markdown parsing)
250 lines (240 loc) • 9.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Flex Table with Modal</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
flex-direction: column;
}
.container {
max-width: 1200px;
overflow: auto;
}
.table {
display: flex;
flex-wrap: wrap;
gap: 5px;
border: 2px solid black;
padding: 10px;
background: white;
}
.cell {
flex: 1;
font-size: 30px;
min-width: 50px;
max-width: 50px;
padding: 8px;
text-align: center;
background: lightgray;
border: 1px solid black;
cursor: pointer;
transition: background 0.2s;
flex-grow: 0;
}
.cell:hover {
background: darkgray;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 5px;
text-align: center;
position: relative;
}
.row {
display: flex;
align-items: baseline;
justify-content: left;
gap: 5px;
padding: 5px 0;
}
code {
background: #f0f0f4;
}
.close {
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
#modal-description #setText {
text-align: left;
}
#loading.hide {
display: none;
}
</style>
</head>
<body>
<div id="loading">Loading...</div>
<div class="container">
<div id="table" class="table"></div>
</div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
</div>
</div>
<script>
let script = document.createElement('script');
script.src = "../../es5/bundle.js";
document.head.append(script);
script.onload = function() {
const isLoaded = window.loadMathJax();
if (isLoaded) {
console.log('Styles loaded!');
const data = [];
const iconsData = [];
const color = 'red';
for (let i = 0; i < window.icons.unicodeIcons.length; i++) {
let item = window.icons.unicodeIcons[i];
data.push({...item})
let name = item.alias ? item.alias : item.name;
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
let textContent = `\\icon{${name}}`;
let mathContent = `$\\icon{${name}}$`;
let nameColorContent = `\\icon{${nameColor}}`;
let colorContent = `\\icon{${name} ${color}}`;
iconsData.push({
name: name,
textContent: textContent,
textHtml: window.markdownToHTML(textContent),
mathContent: mathContent,
mathHtml: window.markdownToHTML(mathContent),
nameColorContent: nameColorContent,
nameColorHtml: window.markdownToHTML(nameColorContent),
colorContent: colorContent,
colorHtml: window.markdownToHTML(colorContent)
})
}
for (let i = 0; i < window.icons.squaredIcons.length; i++) {
let item = window.icons.squaredIcons[i];
data.push({...item})
let name = item.alias ? item.alias : item.name;
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
let textContent = `\\icon{${name}}`;
let mathContent = `$\\icon{${name}}$`;
let nameColorContent = `\\icon{${nameColor}}`;
let colorContent = `\\icon{${name} ${color}}`;
iconsData.push({
name: name,
textContent: textContent,
textHtml: window.markdownToHTML(textContent),
mathContent: mathContent,
mathHtml: window.markdownToHTML(mathContent),
nameColorContent: nameColorContent,
nameColorHtml: window.markdownToHTML(nameColorContent),
colorContent: colorContent,
colorHtml: window.markdownToHTML(colorContent)
})
}
for (let i = 0; i < window.icons.faIcons.length; i++) {
let item = window.icons.faIcons[i];
data.push({...item, textOnly: true})
let name = item.alias ? item.alias : item.name;
let nameColor = `${color}_${name.indexOf('black_') === 0 ? name.replace('black_', '') : name}`;
let textContent = `\\icon{${name}}`;
let nameColorContent = `\\icon{${nameColor}}`;
let colorContent = `\\icon{${name} ${color}}`;
iconsData.push({
name: name,
textContent: textContent,
textHtml: window.markdownToHTML(textContent),
nameColorContent: nameColorContent,
nameColorHtml: window.markdownToHTML(nameColorContent),
colorContent: colorContent,
colorHtml: window.markdownToHTML(colorContent),
textOnly: true
})
}
for (let i = 0; i < window.icons.emojiIcons.length; i++) {
let item = window.icons.emojiIcons[i];
data.push({...item})
let name = item.alias ? item.alias : item.name;
let textContent = `\\icon{${name}}`;
let emojiContent = `\\icon{${name} emoji}`;
let mathContent = item.textOnly ? '' : `$\\icon{${name}}$`;
let colorContent = `\\icon{${name} ${color}}`;
iconsData.push({
name: name,
symbol: item.symbol,
textContent: textContent,
textHtml: window.markdownToHTML(textContent),
emojiContent: emojiContent,
emojiHtml: window.markdownToHTML(emojiContent),
mathContent: mathContent,
mathHtml: mathContent ? window.markdownToHTML(mathContent) : '',
colorContent: colorContent,
colorHtml: window.markdownToHTML(colorContent)
})
}
console.log("[TEST]=>iconsData=>", iconsData)
console.log("[TEST]=>iconsData=>", JSON.stringify(iconsData, null, 2))
const table = document.getElementById("table");
const modal = document.getElementById("modal");
const modalTitle = document.getElementById("modal-title");
const modalDescription = document.getElementById("modal-description");
const closeModal = document.querySelector(".close");
for (let i = 0; i < iconsData.length; i++) {
let item = iconsData[i];
const cell = document.createElement("div");
cell.className = "cell";
let name = item.name;
cell.innerHTML = item.emojiHtml ? item.emojiHtml : item.textHtml;
cell.title = name;
cell.addEventListener("click", () => {
modalTitle.innerHTML = item.textHtml + `<br>` + item.name;
let iconContentHtml = '<div class="row">' + `<strong>Text mode:</strong> ` + `<code>${item.textContent}</code> ` + item.textHtml + '</div>';
if (item.mathContent) {
iconContentHtml += '<div class="row">' +`<strong>Math mode:</strong> ` + `<code>${item.mathContent}</code> ` + item.mathHtml + '</div>';
}
if (item.emojiContent) {
iconContentHtml += '<div class="row">' +`<strong>Emoji:</strong> ` + `<code>${item.emojiContent}</code> ` + item.emojiHtml + '</div>';
}
iconContentHtml += "<h3>Colors:</h3>";
if (item.nameColorContent) {
iconContentHtml += '<div class="row">' +`<code>${item.nameColorContent}</code> ` + item.nameColorHtml + '</div>';
}
iconContentHtml += '<div class="row">' +`<code>${item.colorContent}</code> ` + item.colorHtml + '</div>';
modalDescription.innerHTML = iconContentHtml;
modal.style.display = "flex";
});
table.appendChild(cell);
}
const loading = document.getElementById('loading');
loading.classList.add('hide')
closeModal.addEventListener("click", () => {
modal.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target === modal) {
modal.style.display = "none";
}
});
}
};
</script>
</body>
</html>