youwen5/blog
1
0
Fork 0
mirror of https://github.com/youwen5/blog.git synced 2024-11-24 18:03:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: mathjax render mathml

Browse source
This commit is contained in:
Youwen Wu 2024-05-25 17:48:30 -07:00
parent af45914d82
commit bbb0b28bef
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
5 changed files with 20 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/css/default.css
View file

@ -1,6 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.cdnfonts.com/css/latin-modern-math");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@ -51,12 +50,6 @@
div.sourceCode { div.sourceCode {
@apply p-4 rounded-lg; @apply p-4 rounded-lg;
} }
math {
@apply font-math;
}
math[display="block"] {
@apply my-1 text-xl;
}
ol, ol,
ul { ul {
@apply list-inside leading-loose; @apply list-inside leading-loose;

2
src/out/bundle.css
View file

File diff suppressed because one or more lines are too long

13
src/posts/2024-05-25-haskell-blog.md
View file

@ -74,17 +74,14 @@ seemed like a little too much work to maintain. I switched to hakyll because
KaTeX though. It doesn't directly render it, but simply injects the KaTeX KaTeX though. It doesn't directly render it, but simply injects the KaTeX
files and renders it client-side. files and renders it client-side.
Also, I can ship practically zero JavaScript with this site. The only script
right now is the one that manages the light/dark toggle, and can be measured in
_bytes_. I only ship a few fonts and a minified stylesheet.
### speaking of math ### speaking of math
We can have math inline, like so: We can have math inline, like so:
$\int_\infty^\infty \, e^{-x^2}\,dx = \sqrt{\pi}$. Instead of using KaTeX or $\int_\infty^\infty \, e^{-x^2}\,dx = \sqrt{\pi}$. This site ships MathML math
MathJax, this site uses MathML. There's pros and cons to this. with its HTML, and the MathJax script to the client. MathJax renders all of the
math so it looks nice and standardized across browsers, but the math still
Pros: displays regardless (like say if MathJax couldn't load due to slow network)
because of MathML. Best of both worlds. Pros:
- A little more accessible - A little more accessible
- Can be rendered without additional stylesheets. I just installed the Latin - Can be rendered without additional stylesheets. I just installed the Latin

20
src/templates/default.html
View file

@ -50,12 +50,10 @@
/> />
<link rel="stylesheet" href="./out/bundle.css" /> <link rel="stylesheet" href="./out/bundle.css" />
<link rel="stylesheet" href="./css/code.css" /> <link rel="stylesheet" href="./css/code.css" />
<link <script
rel="stylesheet" async
href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"
integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" ></script>
crossorigin="anonymous"
/>
<script> <script>
if ( if (
@ -78,6 +76,16 @@
themeButton.innerText = "theme: system" themeButton.innerText = "theme: system"
} }
} }
MathJax = {
startup: {
ready: function () {
MathJax.startup.defaultReady()
MathJax.startup.promise.then(function () {
MathJax.mathml2svgPromise(document.body)
})
},
},
}
</script> </script>
</head> </head>
<body <body

1
tailwind.config.js
View file

@ -7,7 +7,6 @@ module.exports = {
fontFamily: { fontFamily: {
sans: ["Inter", "sans-serif"], sans: ["Inter", "sans-serif"],
serif: ["Merriweather", "serif"], serif: ["Merriweather", "serif"],
math: ["Latin Modern Math", "serif"],
}, },
colors: { colors: {
primary: { primary: {