Coffee Chat Brewing AI Knowledge

eng kor

When mathematical expression syntax isn't applying on GitHub Pages

15 Mar 2024    

I wrote a math expression in a GitHub blog post, but there was an issue with applying markdown syntax. I’m posting this to document the solution that I applied.

1. Modify the _config.yml file

Check and modify the markdown-related settings in the _config.yml file like below. If they don’t exist, add them like below. It’s recommended to set the markdown engine to kramdown.

2. Write a HTML file of math expression syntax within the _includes folder

Generally, GitHub blogs contain an _include folder. Write a script within this folder to enable math expression syntax to be applied to posts. Let’s assume creating a html file named ‘math’

You can set each math syntax mark for the inlineMath and displayMath. Similar to the displayMath item in the above code, you can specifiy multiple marks in the list. Following the example, if you wrap the formula in $$ or \\[ and \\], the math style will be displayed as the display style.

*When setting the syntax as \[ and \] instead of \\[ \\], there might be instances where ordinary text enclosed within square brackets is also treated as part of the math expression.

Inline and Display style

The inline style and the display style are two styles of math expression.

  • Inline style: Representing math expression within a sentence without line breaks

  • Display style: Generating math expression as blocks for representation

    $2$ plus $3$ is $5$: $$2+3=5$$

    $2$ plus $3$ is $5$: \[2+3=5\]


3. Apply the HTML script created in 2. to the post

To apply the script created above to an actual post, you’ll need to modify the HTML file related to the layout. Find an appropriate file in the _layout folder and incorporate the content of the html file into the section where the post’s content is inserted. For example, I found and modified the ‘default.html’ file like the example below:

{ content } displalys the main body of the post. include file.html means it includes the content of ‘file.html’. Therefore, within this block, it signifies applying the math syntax written in ‘math.html’

You can modify the code and adjust if applying the math syntax or not,

The code page.use_math being true indicates that the content of ‘math.html’ will be applied. Here, page refers to the each page. To set page.use_math, simply add use_math: true to the Front Matter of each post.

For posts where math expressions are not needed or you prefer not to apply them, simply omit the use_math tag or set it to false


Reference

https://junia3.github.io/blog/markdown
https://an-seunghwan.github.io/github.io/mathjax-error/

Related posts