Complete Beginner in Website and Cannot Follow Mathjax Tutorial

support
1

I just created a fresh website, and it works locally when I type plain text. Now I want to add LaTeX support, and I was trying to follow this tutorial:

However, the tutorial is not aimed at complete beginners. I have no idea what they are referring to. My layout directory has zero file, so I have no footer.html to insert the code into (I tried inserting into the site_footer.html file in themes/layout/partials but that didn’t work). I have no idea where to insert the CSS code (I don’t even know what CSS is). What I really need is a step-by-step guide that assume a freshly created website using “hugo new site”. But I couldn’t find anything else that offers such guide. I’m hoping someone can help a total newbie. I really want to write a math blog and I chose Hugo because I heard it’s the most hassle-free. Thank you.

2

Hello @tholdem

The linked tutorial is actually an out-of-date page from the old Hugo Documentation.

Although it’s far from perfect the official and up-to-date Hugo Documentation is located here.

Regarding a tutorial for setting up math typesetting in Hugo here is an informative article/tutorial:

3

Furthermore here is a current workaround for KaTex that I have authored:

Make sure to view the above file in Raw Format as GitHub does not render everything.

4

Thank you so much for your help. Unfortunately for a complete beginner like me, I still have same trouble when following the mathjax tutorial. The problems are 1. I do not have a header.html in layout/partials. 2. I do not know where to add CSS code because I don’t know where CSS file is. Could you clarify on them? Thank you.

5

You need to share your project. I cannot know the answer to your questions without seeing the structure of your project.

Also see: Requesting Help, this topic contains useful info.

6

here it is. I added the code {{ partial "mathjax_support.html" . }} to site-header.html in the theme and that seemed to work. I still don’t know where to add CSS. I’d appreciate if you could double check if my approach for the 1st problem is correct and point me where to add CSS. Thank you.

7

I see. I will look into it sometime in the coming days and get back to you.

Unless of course someone else does have a look before me and offers guidance in this topic.

1 Like
8

For the record I want to point out that the Ananke theme does not offer an easy way to add custom CSS overrides, furthermore it does not use Hugo Pipes, instead the theme’s stylesheet resides in the staticDir and its is the result of a Webpack workflow.

I have opened two issues:

One at the Ananke theme repo, asking the maintainers to consider updating the theme to provide for the above (i.e Hugo Pipes, custom CSS)

And a second one at the Hugo Documentation repo as I believe that the theme of the Quick Start Guide that is meant for newbies should use current Hugo features to make learning Hugo easier.

9

I appreciate the insights. I was wondering if you know a better theme to use that does have Hugo Pipes support, and how to implement custom CSS in there? Thank you.

10

Recently someone else had a similar issue about implementing Custom CSS.

The Papermod theme does provide for an easy way to add custom CSS.

See the following post as well as the rest of the topic: Papermod Theme: How to add custom CSS?

The Papermod theme repo is located here and its demo over here

If the above theme does not suit your needs have a look at the Hugo Themes Showcase. There is a plethora of themes, some of them provide for CSS overrides and/or Mathjax, of course in every theme the way of doing things is slightly different, due to the preferences and habits of each author.

11

This looks great, thank you! I simply copied the code to the blank.css at PaperMod/assets/css/extended, without creating a parallel directory under my site like the other user did. Would that be okay if I’m going to use PaperMod throughout my site?

Also, what does that CSS code do? How do I know if I implemented it correctly? Math symbols were already working before I added the CSS code so I’m not sure what I should be looking.

12

If you do not plan updating the theme from the origin repository then it’s going to be OK.
If you plan on keeping the theme updated then you need to follow the steps described by the other user.

As far as I can tell Papermod does not come with Mathjax or KaTex support.
Also note that I am not familiar with Papermod myself. Please have a look at its documentation

From a casual look it appears that the theme author has provided partial templates for users who need to extend the theme with external libraries.

13

I see.

To clarify I meant that after creating a mathjax.html file and include it in the header (per the tutorial), I can already display math symbols (I haven’t tested extensively to say it works well in all situations). So it left me wonder what the purpose of the CSS code is and how I know it works properly?

code.has-jax {
    -webkit-font-smoothing: antialiased;
    background: inherit !important;
    border: none !important;
    font-size: 100%;
}
14

The first rule of the above CSS refers to the rendering of the Math symbols on Webkit browsers. The rest is self-explanatory.

In any case we do not provide support for CSS here.

If you can render the Math then this topic needs to be marked as solved.

1 Like
15

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.