Load MathJax on github page using jekyll without overwriting layout

admin

I have a GitHub Pages site setup with Jekyll: davidelegacci.github.io/Research/. I need to load MathJax to display math content, but doing so I end up overwriting the layout, obtaining a style-less page.

How can I load MathJax without overwriting the layout?

Some details. The root directory is

.
├── README.md
├── _config.yml
├── _layouts
│   └── default.html
├── hamiltonian
│   └── some_content.md
└── learning
    └── some_content.md

Without loading the default.html layout anywhere the _config.yml is

plugins:
  - jekyll-relative-links
relative_links:
  enabled: true
  collections: true
include:
  - README.md

Note that there is no theme installed. I guess Github uses some default stylesheet (that seems to be necolas.github.io/normalize.css/). I like this default style, but math is not rendered:

Default css, no math

I added the default.html layout to all pages and posts adding Front Matter Defaults to _config.yml:

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: "default"

and I loaded MathJax in default.html

<!doctype html>
<html lang="en">
<head>
  <!-- inline config -->
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        macros: {
         RR: "{\\bf R}",
         bold: ["{\\bf #1}", 1],
         indep: "{\\perp \\!\\!\\! \\perp}",
       }
     },
     svg: {
      fontCache: 'global'
    },
  };
</script>

<!-- load MathJax -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

</head>
<body>
  {{content}}
</body>
</html>

The script to load MathJax is taken from here my1396.github.io/Econ-Study/2023/10/12/Mathjax.html and official documentation is here docs.mathjax.org/en/latest/web/configuration.html.

Now both inline and display LaTex is rendered correctly, but any style is lost:

no style, yes math

How can I load MathJax without overwriting the layout?

Related: I found this question but it refers to a Jekyll-based site without GitHub pages, and I got quickly lost in gem stuff, that I completely ignore.

Read more here: Source link