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
+
+
+ The KaTeX stylesheet is not loaded!
+ KaTeX stylesheet version:
+
+```
+
+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
+
+
+ The KaTeX stylesheet is not loaded!
+ KaTeX stylesheet version:
+
+```
+
+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!