kaisugi / hugotex

LaTeX style hugo theme

HugoTeX

A hugo theme which looks like a LaTeX document.

Live Demo: https://hugotex.vercel.app/

This theme is heavily inspired by latex-css.

Quick Start

git clone https://github.com/kaisugi/HugoTeX
cd HugoTeX/exampleSite
hugo server -t ../..
# open http://localhost:1313/

Hugo (>= 0.92.0) is required.

Config settings

example

baseURL = "https://hugotex.vercel.app/"
title = "HugoTeX"
paginate = 3
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"

[Params.Author]
  name = "Kaito Sugimoto"
  abstract = """
  I'm a software engineer and a coffee enthusiast in Japan.
  My primary interest lies in the area of natural language processing.
  """

[taxonomies]
  category = "categories"
  tag = "tags"
  series = "series"

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    style = "paraiso-dark" # syntax highlighting style

[Params]
  darkmode = true # set true if you want to enforce dark mode
  # lightmode = true # set true if you want to enforce light mode

By default, dark mode is automatically enabled based on prefers-color-scheme media query. If you want to enforce or deactivate this setting, set darkmode=true or lightmode=true in [Params]

Social media

If you want to enable the generation of Twitter Card or Opengraph meta tags so you get nice embeds on Twitter, Facebook and other social media sites, add the following:

[Params]
  twittercard = true
  opengraph = true

See the Internal Templates in Hugo for how to configure this behaviour further.

Shortcodes

Sidenotes

LaTeX.css, which HugoTeX is using, defines syntax for sidenotes. However, as it is a little verbose to write, we provide a Hugo shortcode for that:

A sentence deserving a sidenote.{{% sidenote %}}The note itself.{{% /sidenote %}}.

The note will be displayed on the right margin on larger screens. On smaller screns the note will be hidden by default and will open when clicking on the superscript number marking the existence of the note.

For contributors

Any issues or pull requests are welcome.

LICENSE

MIT

Similar Projects

• queensferryme / hugo-theme-texify

hugotex's Issues

Custom CSS?

Hello, thanks a ton for the really amazing theme! I'm a newcomer to Hugo and so that might be the reason, but I can't figure out how to add my own CSS to this theme. Is it possible? Thanks in advance! 🙂

I can write more shortcodes to support more latex.css features

=> https://latex.vercel.app/#tdpl

"darkmode" param doesn't do anything

When I set this param in config.toml:

[Params]
  darkmode = true

Nothing happens. Dark mode is not applied to the theme.

I am using Hugo v0.100.2.

Of course, I can overwrite the CSS myself, but it would be nice if this param worked.

Tags URL is invalid, when baseURL = "/"

I need to publish my site at multiple domains. To do this, I simply specify the following in my config.toml:

baseURL = "/"

This works great across my other sites, using other themes, and it mostly works in HugoTeX, as well.

However, tag URLs are invalid. When I click on the "games" tag, for example, I'm taken to the following URL:

https://tags/games/

Obviously, that doesn't work.

Anyway, this is a low priority issue, and not something that affects me much, at the moment. I just thought I'd let you know!

Thanks for creating such an awesome theme!

Support of `lastmod`

Hugo allows to define two dates on the page:

• date when it was created and which is used for sorting;
• lastmod when it was updated the last time.

Right now HugoTex shows lastmod if it availabe, which might be confused.

Maybe add (Last time updated at ...) ?

Add support for sidenotes

Latex.css provides a way to create sidenotes (see https://latex.vercel.app/#sidenotes).

Since the setup is somewhat complicated, I created a Hugo shortcode for that:

{{ $id := md5 .Inner }}
<label for="{{ $id }}" class="sidenote-toggle sidenote-number"></label>
<input type="checkbox" id="{{ $id }}" class="sidenote-toggle" />
<span class="sidenote">{{ .Inner }}</span>

The first line uses the md5 function to compute a unique id for the elements.

It can be used like this:

{% sidenote %}}
The content of the note.
{{% /sidenote %}}

In order for it to work, I had to include the Latex.css stylesheet in layouts/partials/head.html (<link rel="stylesheet" href="https://latex.now.sh/style.css">) since the stylesheet included as static/latex.css is ~200 lines shorter and does not include support for sidenotes.

I would propose merging this shortcode into this project as I believe that all of the users of the theme could benefit from it.
Also, perhaps static/latex.css could be updates to reflect the newest version of Latex.css?

Adding an image from static folder

Hi, I already want to thank you for this theme.
I'm a beginner and I have issues adding a picture in one of my articles.
The image is in the static folder and my article is in the content folder.
As there is no example of ExampleSite I allowed me to open an issue.

My repo is here
Best regards

Update to `latex.css-1.10.0`?

Thanks for a vert nice theme!

Is it possible to update to latex.css which brings support of dark mode to simplify it?

remove instagram iframe from example

in order to keep in touch with current example