Skip to content

Instantly share code, notes, and snippets.

@ballgoesvroomvroom
Created February 23, 2024 12:36
Show Gist options
  • Save ballgoesvroomvroom/e609d76434e881c4e747c3707078b6cc to your computer and use it in GitHub Desktop.
Save ballgoesvroomvroom/e609d76434e881c4e747c3707078b6cc to your computer and use it in GitHub Desktop.
katex issue file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=.25, user-scalable=yes"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
onload="katexOnload();"></script>
<style>
.katex-display {
overflow-x: auto;
}
</style>
</head>
<script>
let thread = new Promise((res, rej) => {
document.addEventListener("DOMContentLoaded", res)
})
function createCard() {
const pTag = document.createElement("p")
pTag.style.margin = "0"
pTag.style.marginRight = "10px"
pTag.style.padding = "20px"
pTag.style.color = "white"
pTag.style.backgroundColor = "black"
katex.render("2x^3 + x^2 + 13", pTag, {
throwOnError: false
})
// pTag.innerHTML = "2x^3 DUMMY TEXT"
return pTag
}
function katexOnload() {
/**
* called by onload attribute in external katex script loader
*/
thread.then(() => {
const container = document.getElementById("scroll-container")
for (let i = 0; i < 50; i++) {
container.appendChild(createCard())
}
})
}
</script>
<body style="width: 100%; margin: 0; overflow-x: hidden;">
<div id="screen" style="width: 100%;">
<div id="scroll-container" style="display: flex; flex-direction: row; width: 100%; overflow-x: auto">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment