Add Katex Support - Githubissues

bruno-pinheiro commented 5 years ago

I would like to use it as a data science studies repository. For this, some math type setting is a prerequisite.

I had followed some tutorials to implement Katex, but it's not working, so i thought ask some help here.

Do you consider it plausible for this theme? If yes, I can try to implement this, but I need some road tip do go ahead.

And many thanks for this theme. It's really amazing!

zwbetz-gh commented 5 years ago

Hi @bruno-pinheiro

I was curious about Katex, so I made a simple page to test it (below). I don't plan to add this to Cupper currently, but may revisit this in the future.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">

    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>

    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
    <p>
      \[\int_1^\pi \sin x \mathrm{d} x\]
    </p>
  </body>
</html>

zwbetz-gh commented 5 years ago

@bruno-pinheiro Am closing this issue. Goodluck with your Katex implementation.

If you wish, feel free to send a PR with your Katex changes when ready and I'll review.

zwbetz-gh commented 5 years ago

@bruno-pinheiro I've added Katex support. See 31c3362

All you need to do to enable Katex in your config.toml file is

[params]
  katex = true

For a live demo and TeX examples, see https://cupper-hugo-theme.netlify.com/katex-math-typesetting/

bruno-pinheiro commented 5 years ago

Hey @zwbetz-gh ! Many thanks for your effort!

Actually, i had a try on april 1º. As it was weird rendered, and I had not much time to study and give you some more structured and informed feedback, i just prefered to wait.

But give your try:

Your example

In my computer (I'm on a Ubuntu 18.10 using Firefox and Chrome) your example results like this. Exactly the same i was getting.

Is it rendering well in your pc?

My first attempt was the same in your commit 31c33627e6ad76a89826f13d40e2911785f7cd87:

I did create this files on the root.

A katex.html in layouts/partials:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

And a baseof.html in layouts/_default:

<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
  {{ partial "head.html" . }}
  <body>
    <a href="#main">skip to content</a>
    {{ partial "svg.html" . }}
    <div class="wrapper">
      {{ partial "header.html" . }}
      <div class="main-and-footer">
        <div>
          {{ block "main" . }}{{ end }}
          {{ partial "footer.html" . }}
        </div>
      </div>
    </div>
    {{ partial "script.html" . }}
    {{ partial "google-analytics-async.html" . }}
    {{ partial "katex.html" . }}
  </body>
</html>

This is how it was rendered:

My first attempt

Too easy to be true:

Then I tried to explicitly include katex.min.css in static/css, and changed katex.html to:

<link rel="stylesheet" src="css/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

And It resulted an even weird rendering:

katex-erro-02

So I did tryed to include inside <header></header> in header.html

  <script>
  renderMathInElement(document.body,
    {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false},
        ]
    }
  );

  var inlineMathArray = document.querySelectorAll("script[type='math/tex']");
  for (var i = 0; i < inlineMathArray.length; i++) {
    var inlineMath = inlineMathArray[i];
    var tex = inlineMath.innerText || inlineMath.textContent;
    var replaced = document.createElement("span");
    replaced.innerHTML = katex.renderToString(tex, {displayMode: false});
    inlineMath.parentNode.replaceChild(replaced, inlineMath);
  }

  var displayMathArray = document.querySelectorAll("script[type='math/tex; mode=display']");
  for (var i = 0; i < displayMathArray.length; i++) {
    var displayMath = displayMathArray[i];
    var tex = displayMath.innerHTML;
    var replaced = document.createElement("span");
    replaced.innerHTML = katex.renderToString(tex.replace(/%.*/g, ''), {displayMode: true});
    displayMath.parentNode.replaceChild(replaced, displayMath);
  }
</script>

I have tested this with online and offline stylesheet, but anything change.

zwbetz-gh commented 5 years ago

Thank you for this detailed test case @bruno-pinheiro . I'm looking into what is causing this weird styling

zwbetz-gh commented 5 years ago

The offending CSS is here https://github.com/zwbetz-gh/cupper-hugo-theme/blob/13daf0aa29864f235461242bbd9c780cc7f3e192/assets/css/template-styles.css#L28-L30

Changing it to the below helps, but still doesn't fix it

* + * {
    margin-top: 2.25rem;
}
.katex * {
    margin-top: 0;
}

zwbetz-gh commented 5 years ago

@bruno-pinheiro Removing the below CSS "fixes" the Katex maths...

* + * {
    margin-top: 2.25rem;
}

But it messes with the rest of the site since it removes the top margin between all sibling elements.

So, any ideas to build off of this?

zwbetz-gh commented 5 years ago

Katex support has been removed in 56f7738. If we figure out a CSS workaround in the future, I'll revert that commit.

antoniogarro commented 5 years ago

This seems to work for me:

.katex * {
    margin-top: 0;
    background-color: transparent;
}

(Great theme, by the way!)

zwbetz-gh commented 5 years ago

Many thanks @antoniogarro :) 3b8b373

zwbetz-gh / cupper-hugo-theme

Add Katex Support #7