From f948947736fa0674c5edd6c5ca30fcbccdac75fc Mon Sep 17 00:00:00 2001
From: ylemkimon <mail@ylem.kim>
Date: Thu, 18 Apr 2019 22:10:19 +0900
Subject: [PATCH] Add KaTeX version to stylesheet and troubleshooting guide
 (#1893)

* Add KaTeX version to stylesheet

* Add troubleshooting guide

* Update katex.less

[skip ci]
---
 docs/issues.md                                | 22 +++++++++++++++++++
 src/katex.less                                |  7 ++++++
 webpack.common.js                             |  7 +++++-
 .../versioned_docs/version-0.10.0/issues.md   | 22 +++++++++++++++++++
 4 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/docs/issues.md b/docs/issues.md
index cb7bebcb..6e3c12a4 100644
--- a/docs/issues.md
+++ b/docs/issues.md
@@ -17,3 +17,25 @@ title: Common Issues
 - MathJax defines `\color` to be like `\textcolor` by default; set KaTeX's
   `colorIsTextColor` option to `true` for this behavior.  KaTeX's default
   behavior matches MathJax with its `color.js` extension enabled.
+
+## Troubleshooting
+
+To check the stylesheet (katex.css) is properly loaded, add following code to
+anywhere in the document:
+
+```html
+<style>
+  .katex-version {display: none;}
+  .katex-version::after {content:"0.10.2 or earlier";}
+</style>
+<span class="katex">
+  <span class="katex-mathml">The KaTeX stylesheet is not loaded!</span>
+  <span class="katex-version rule">KaTeX stylesheet version: </span>
+</span>
+```
+
+If it is loaded properly, it'll show its version. Make sure its version matches
+the version of the JavaScript file (katex.js), which is defined in `katex.version`.
+If it is not loaded properly, it'll show:
+
+> The KaTeX stylesheet is not loaded!
diff --git a/src/katex.less b/src/katex.less
index 7775f418..bcfee716 100644
--- a/src/katex.less
+++ b/src/katex.less
@@ -4,6 +4,9 @@
 // The mu unit is defined as 1/18 em
 @mu: 1/18em;
 
+// The version is dynamically set from package.json via webpack.common.js
+@version: "";
+
 .katex {
     font: normal 1.21em KaTeX_Main, Times New Roman, serif;
     line-height: 1.2;
@@ -18,6 +21,10 @@
     // mode, while still allowing background/foreground setting on root .katex
     * { -ms-high-contrast-adjust: none !important; }
 
+    .katex-version::after {
+        content: @version;
+    }
+
     .katex-mathml {
         // Accessibility hack to only show to screen readers
         // Found at: http://a11yproject.com/posts/how-to-hide-content/
diff --git a/webpack.common.js b/webpack.common.js
index b2630d65..4ee564a2 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -3,6 +3,8 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const {version} = require("./package.json");
+
 const browserslist = require('browserslist')();
 const caniuse = require('caniuse-lite');
 
@@ -59,8 +61,11 @@ function createConfig(target /*: Target */, dev /*: boolean */,
         });
     }
 
+    const lessOptions = {modifyVars: {
+        version: `"${version}"`,
+    }};
+
     // use only necessary fonts, overridable by environment variables
-    const lessOptions = {modifyVars: {}};
     let isCovered = false;
     for (const font of fonts) {
         const override = process.env[`USE_${font.toUpperCase()}`];
diff --git a/website/versioned_docs/version-0.10.0/issues.md b/website/versioned_docs/version-0.10.0/issues.md
index d4bd2325..f74e7a95 100644
--- a/website/versioned_docs/version-0.10.0/issues.md
+++ b/website/versioned_docs/version-0.10.0/issues.md
@@ -18,3 +18,25 @@ original_id: issues
 - MathJax defines `\color` to be like `\textcolor` by default; set KaTeX's
   `colorIsTextColor` option to `true` for this behavior.  KaTeX's default
   behavior matches MathJax with its `color.js` extension enabled.
+
+## Troubleshooting
+
+To check the stylesheet (katex.css) is properly loaded, add following code to
+anywhere in the document:
+
+```html
+<style>
+  .katex-version {display: none;}
+  .katex-version::after {content:"0.10.2 or earlier";}
+</style>
+<span class="katex">
+  <span class="katex-mathml">The KaTeX stylesheet is not loaded!</span>
+  <span class="katex-version rule">KaTeX stylesheet version: </span>
+</span>
+```
+
+If it is loaded properly, it'll show its version. Make sure its version matches
+the version of the JavaScript file (katex.js), which is defined in `katex.version`.
+If it is not loaded properly, it'll show:
+
+> The KaTeX stylesheet is not loaded!