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

@@ -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!

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/

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()}`];

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!