Comments (15)
I ran into this. You have to load mathjax javascript library to display mathematical notation on your pages. The easiest way to do this is to insert the following snippet:
<!-- Loading mathjax macro -->
<!-- Load mathjax -->
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<!-- MathJax configuration -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true,
processEnvironments: true
},
// Center justify equations in code and markdown cells. Elsewhere
// we use CSS to left justify single line equations in code cells.
displayAlign: 'center',
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}},
linebreaks: { automatic: true }
}
});
</script>
<!-- End of mathjax configuration -->
into one of the partials files which you're sure will be loaded on each of your posts. You can find these in layout/partials. In my case I put the code above in the sidebar.html file because the sidebar is guaranteed to load on all my posts.
For you it depends on which theme you have installed. Usually sidebar.html/header.html/footer.html are good bets. This is something which ought to be covered blogdown's documentation.
from blogdown.
Finally I have documented how to make MathJax work properly: https://bookdown.org/yihui/blogdown/templates.html This section is quite long but you will understand the nuts and bolts of Hugo much better.
from blogdown.
We will document this in the near future. The approach @Lauler mentioned has a potential problem, but I don't have the time to explain it in detail. You can see what I did in the default template of blogdown: https://github.com/yihui/hugo-lithium/blob/master/layouts/partials/footer_mathjax.html
from blogdown.
I don't understand why people have been talking about the Load mathjax
codes. In my case, I simply set the option 'math = true' in config.toml
and all the equations went perfectly the right way. My website is built by blogdown, hugo-academic theme.
But my story went another way as follows.
-
At the beginning, the LaTeX equations were not displayed correctly on my website.
-
I set the option 'math = true' in
config.toml
, and run 'blogdown::serve_site()'. Equations were still not correctly displayed in RStudio Viewer. -
After trying many times, I clicked accidentally the
Show in new window
button at the topleft corner of RStudio Viewer, and surprisingly found that the equations were displayed correctly in Firefox!
For both the newest version 1.0.143 and the preview version 1.1.233 of RStudio.
So it is a problem of RStudio Viewer? Curiously.
My sessioninfo:
R version 3.3.3 (2017-03-06)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1
from blogdown.
@yihui Hi is there a list of tested themes known to render equations properly? The default them hugo-lithium-blogdown
looks a bit too simplistic..
The hugo-future-imperfect
looks nice but does not render the equations. I tried simply copying the footer file you mentioned to the layouts folder but it messes some other things up. I know absolutely nothing about html.
from blogdown.
@pzhaonet You can use math = true
only because your theme supports it (thanks to the author of the hugo-academic theme). Hugo does not support MathJax out of the box.
There are known issues with RStudio Viewer on Windows. In particular, https resources are unlikely to work, which means (1) you have to use protocol-relative URLs for https resources, i.e. //
instead of the hardcoded https://
; (2) we must have access to the resources via http://
, which depends on the server settings.
If you don't understand what these mean, your best choice is to pop out the web page from RStudio Viewer into your real web browser.
from blogdown.
Thanks for explanation. Lucky and proud to use hugo-academic theme!
from blogdown.
Does anyone know how to do this in blackburn theme?
from blogdown.
Hi I'm trying to enable latex notation in the skills widget in the academic configuration of blogdown. Any ideas on how to proceed? Thanks in advance.
from blogdown.
help! The preview of this markdown file works normally in rstudio. But this equation isn't shown in html.
$$
w\left(r_{i}^{k}\right)=\left\{\begin{array}{ll}{w_{i}^{k-1}\left(1-\left(r_{i}^{k} / 6 s\right)^{2}\right)^{2},} & {0<r_{i}<6 s} \\ {w_{m i n},} & {\left|r_{i}^{k}\right| \geqslant 6 s} \\ {w_{i}^{k-1},} & {-6 s<r_{i} \leqslant 0}\end{array}\right.
$$
from blogdown.
Hi, @kongdd
Your equation rendered fine on my machine
My guess is that the mathjax library was not loaded correctly. In chrome you could hit F12 and check if there's any errors.
from blogdown.
Thanks for your reply.
I am rendering this equation in hugo
blog. But it does not work.
from blogdown.
Ahh, I forgot to check the repo name.
Blogdown is another story because it doesn't use pandoc as the markdown engine so the latex is not supported. Please check the blogdown manual
In short, the issue is that not all Hugo themes have mathjax supported. The default Hugo-lithium theme has it, but the majority of Hugo themes do not have it.
You have two options:
-
Use Rmd format for the blogdown posts, mathjax is embedded in the generated html and passed to Hugo.
-
Get your hands dirty and set up mathjax for your theme.
from blogdown.
@tcgriffith Thanks for your detailed suggestion! Both of md
and Rmd
works now. I have to say Rmd is much simple.
from blogdown.
Hey, I have a much simpler solution to this. This should be enough for HTML noobs like me who want to use any Theme. Just add the following to the head of the Rmd file where you want to use Math and proceed. This adds Mathjax to your webpage from a nearby CDN.
header-includes:
- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Finally, the RMD should look like this:
title: "The tile of your page"
author: "Your Name Here"
date: 2020-09-23
categories: ["Replace this as you wish"]
tags: ["Replace this as you wish"]
header-includes:
- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Your text here which can now handle math equations.
from blogdown.
Related Issues (20)
- Issue with site formatting with blogdown::build_site(). HOT 3
- Unable to serve site after updates HOT 6
- modelDown::modelDown() deleted all files in my output folder??!! HOT 1
- Home directory does not exist in HUGO academic-theme HOT 1
- Upkeep for blogdown
- Rmd files rendering with formatting issues HOT 7
- blogdown:::new_post_addin() should check for hugo first HOT 1
- Blogdown donβt supports multiple-column rmarkdown HOT 8
- Unable to create new posts HOT 2
- Missing website menu bar buttons when using blogdown to render web pages HOT 3
- Wrong relative links on the pkgdown site HOT 2
- allow use of hugo.toml for config [FR] HOT 3
- Error building site with hugo-apero theme HOT 5
- Build site with updated Hugo HOT 2
- shortcode doesn't display with leaflet map in the same post HOT 4
- Rmd - interactive map with tmap does not display HOT 5
- trialblogdown HOT 1
- Blogdown starting error and rmd render not working HOT 1
- unable to embed Rmd file in html output HOT 1
- [FR] informative message for missing Hugo HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blogdown.