Add equation support (KaTeX) #5
Conversation
|
Hey, this is really cool! I'll need a bit of time to properly review this. I'm not sure of others' opinions on this, but for the katex CSS I think I'd prefer it added directly to this repo with a version in the file name. This way the statically-generated site doesn't need to depend on I'll try to get a more thorough review later. |
There was a problem hiding this comment.
Looking good so far, I left a few comments.
I know it's somewhat annoying, but could you place all the katex fonts into a public/fonts/katex directory? It's quite a lot of files to mix in with the existing fonts (which should probably also be organized at some point...)
| @@ -302,6 +303,17 @@ function getElements(blocks, level = 0): JSX.Element[] { | |||
| </div> | |||
| ) | |||
| break | |||
| case 'equation': | |||
| elements.push( | |||
| <div key={block.id} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} | |||
There was a problem hiding this comment.
Could you create a .equation class inside of blog.module.css which contains these CSS declarations?
| <div key={block.id} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} | ||
| dangerouslySetInnerHTML={{ | ||
| __html: katex.renderToString(block.equation.expression, { | ||
| throwOnError: false |
There was a problem hiding this comment.
Did you find that this code would often throw exceptions? I'm not sure if it's better to create an error on invalid equation content, or to ignore it and keep going.
| resolved "https://registry.yarnpkg.com/katex/-/katex-0.15.3.tgz#08781a7ed26800b20380d959d1ffcd62bca0ec14" | ||
| integrity sha512-Al6V7RJsmjklT9QItyHWGaQCt+NYTle1bZwB1e9MR/tLoIT1MXaHy9UpfGSB7eaqDgjjqqRxQOaQGrALCrEyBQ== | ||
| dependencies: | ||
| commander "^8.0.0" |
There was a problem hiding this comment.
I'd prefer not to downgrade a dependency just because a new dependency needs an older version. Is this absolutely required for katex to function? It seems a bit strange for a CLI argument parser library to be required when we're not using the CLI explicitly.
|
Also if it's not too much trouble, it might be nice to also support the |
I got equation support working:
Feel free to change any/all code, I'm new to next.js/JSX etc. so best practices are likely not followed.