curiositry/mnml-ghost-theme

Add KaTeX for math rendering

curiositry opened this issue · 6 comments

And defer it so it doesn’t slow anything down.

  • Figure out how to apply it to anything between $$ and $$

For now, it’ll be more reliable to render anything with the class math, but support for mathjax style delimiters is coming to KaTeX, and I’ll implement it when it’s ready for use.

Done! Did this in 398da4e . You can now use Tex math like this:

<section class="math">\sum mnml features = \infty</section>

I noticed that the Katex sections are not rendered in the post preview. They are successfully rendered when you click on the blog post, but on the index page the raw expression is shown instead of a rendered one.

Here is the post preview:
screen shot 2016-07-31 at 9 49 03 pm

And the actual blog post:
screen shot 2016-07-31 at 9 49 57 pm

Yes, this is because the {{excerpt}} helper strips out all HTML tags1. In most cases, this is a good thing for what’s displayed on the homepage — it could be quite unattractive if the blogposts had a lot of html right near the top, and it could result in the post previews taking up a lot of space since their size is based on word-count rather than screen real estate.

The {{content}} helper does not sanitize HTML tags, however. So you could change {{excerpt words="30"}} to {{content words="30"}} on line 45 of loop.hbs, and this would result in KaTeX (and any other HTML, such as images) being rendered on the homepage.

Great! That will definitely work. Any particular reason not to make that change permanent within the template? Just to keep the HTML sanitation behavior?

I like to keep the homepage clean, and it’s a lot harder to control the layout when unknown HTML is going to be injected into the post-excerpt element. Because the homepage is a place to get a quick read on each post, I don’t think that having HTML from the posts on the homepage is necessary — a good lede should be enticing enough.

It makes sense that some bloggers — such as yourself — will want to do it differently. You know what you want your homepage to be like: in the the case of mathematics on a blog like yours, it makes sense to display it on the homepage. But displaying math on the homepage can’t be seperated from displaying any HTML that happens to be in the first 30 words, so I think using sanitized excerpts is a safer default.

I hope this explains my reasoning for sticking with {{excerpt}} — and let me know if you have any questions!