question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to clean integrate latex equation inside markdown files ?

See original GitHub issue

Hello !

I’m not quite used to the nuxt/content module, and I’ve never integrated latex in nuxt before, so I prefer asking you ! I’d like to write latex equations un mardown files, fetch the files thanks to the nuxt/content module, and display each articles with their equations. At the end, I’d like to nuxt generate and serve the website with netlify.

I tried integrating through npm, and by including mathjax script in the nuxt.config.js head, but none of this worked, and I’d like to know the “best practice” to make a clean website.

Thanks !

edit : I forgot to say, I checked the remark plugin remark-html-katex and I thought installing it with npm and adding it to the markdown.plugins section of nuxt.config.js would have been a success, but it seems nothing happens when I write an equation in a markdown file.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
benjamincanaccommented, Jun 5, 2020

Hey @mathieunicolas,

First of all, to make a clean website, I’d start by using create-nuxt-app:

npx create-nuxt-app my-project

Then add the content module:

yarn add @nuxt/content

and register it inside nuxt.config.js:

export default {
  modules: [
    '@nuxt/content'
  ]
}

Then to support math equations you will need to use remark-math and rehype-katex (yarn add remark-math rehype-katex).

However, a PR is actually ongoing to extend rehype plugins in the content module, so until it’s merged and released you can set the @nuxt/content dependency to the PR inside your package.json:

"dependencies": {
  "@nuxt/content": "nuxt/content#feat\/rehype-plugins"
}

Then in your nuxt.config.js, you can register the two plugins:

export default {
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  }
}

At this point it should be working, you can then write a markdown file with LaTex inside the content folder and fetch it in your pages:

<template>
  <nuxt-content :document="document" />
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const document = await $content('math').fetch()

    return {
      document
    }
  }
}
</script>

I’ve made you an example here: https://github.com/benjamincanac/nuxt-content-latex

1reaction
saumyasinghal747commented, Jan 9, 2021

How can I specify options for the Katex? For example, I’d like it to output HTML instead of MathML as Chrome no longer supports it. https://katex.org/docs/next/options.html Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use LaTeX in Markdown - Fabrizio Musacchio
A quick guide on how to enable MathJax support in your Markdown documents.
Read more >
[markdown] Use `$...$` and `$$...$$` for math fencing ... - GitLab
I believe gitlab should provide a entry for configure the leading sings for latex formula. Currently, different editors use different signs, $ ...
Read more >
Visibility of math formula in rmarkdown after knitting
I am trying to create an R Markdown file ...
Read more >
Markdown vs latex for thesis - TeX - LaTeX Stack Exchange
Any markdown flavor is indeed a better option than LaTeX to focus on contents and format a document easily with a decent format,...
Read more >
11 Math - RMarkdown for Scientists
Easy. rmarkdown supports LaTeX style equation writing. This section introduces the two types equations, inline, and display form, and how to number equations....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found