Add MathJax support.

4 files changed, 50 insertions, 1 deletions

diff --git a/README.md b/README.md
index fc15bae..7082f62 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ Features in this ported version:
 - `featured_image` url bug is fixed.
 - Table of Contents with scroll spy.
 - Dark mode.
+- MathJax support. (Needs to be enabled manually, see [the project wiki](https://github.com/amazingrise/hugo-theme-diary/wiki) for details.)
 
 ## Quick Start
 
@@ -77,6 +78,8 @@ Please visit [the project wiki](https://github.com/amazingrise/hugo-theme-diary/
 
 [Disable Dark Mode](https://github.com/AmazingRise/hugo-theme-diary/wiki/Dark-Mode)
 
+[Enable MathJax](https://github.com/AmazingRise/hugo-theme-diary/wiki/MathJax)
+
 [Add or disable comment area](https://github.com/AmazingRise/hugo-theme-diary/wiki/Comment-Area)
 
 [Customizations](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization)
diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
index b4f98b8..9fef62c 100644
--- a/assets/scss/journal.scss
+++ b/assets/scss/journal.scss
@@ -69,7 +69,7 @@ body {
 
 * {
   color: $deep-dark-accent;
-  line-height: 1.7em;
+  //line-height: 1.7em;
   word-wrap: break-word;
   box-sizing: border-box;
 }
@@ -815,6 +815,7 @@ a {
 
         .post-subtitle {
           font-size: $post-subtitle-size;
+          line-height: 1.2em;
           width: 80%;
           opacity: 0.6;
           padding: 0px 0 8px 0;
@@ -1061,3 +1062,8 @@ a {
 .year {
   color: $dark-accent;
 }
+
+mjx-container
+{
+  overflow-y: hidden !important;
+}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b0481f9..f7dbd1b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -42,6 +42,10 @@
 
 <script src="{{.Site.BaseURL}}/js/table.js"></script>
 
+{{ if .Params.enableMathJax }}
+  {{ partial "mathjax.html" . }}
+{{ end }}
+
 {{ if and (not (.Params.disableToC) ) (.IsPage) }}
 <script src="{{.Site.BaseURL}}/js/toc.js"></script>
 {{ else }}
diff --git a/layouts/partials/mathjax.html b/layouts/partials/mathjax.html
new file mode 100644
index 0000000..386b8d7
--- /dev/null
+++ b/layouts/partials/mathjax.html
@@ -0,0 +1,36 @@
+<!-- From https://note.qidong.name/2018/03/hugo-mathjax/ -->
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script>
+MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']]
+  },
+  svg: {
+    fontCache: 'global'
+  }
+};
+</script>
+<script type="text/javascript" id="MathJax-script"
+async
+src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+MathJax.Hub.Queue(function() {
+// Fix <code> tags after MathJax finishes running. This is a
+// hack to overcome a shortcoming of Markdown. Discussion at
+// https://github.com/mojombo/jekyll/issues/199
+var all = MathJax.Hub.getAllJax(), i;
+for(i = 0; i < all.length; i += 1) {
+all[i].SourceElement().parentNode.className += ' has-jax';
+}
+});
+</script>
+
+<style>
+code.has-jax {
+font: inherit;
+font-size: 100%;
+background: inherit;
+border: inherit;
+color: #515151;
+}
+</style>
+