Comments (2)
You can replace the original position about Doctify-Katex as below.
<head>
<!-- begin for docsify katex -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X"
crossorigin="anonymous"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz"
crossorigin="anonymous"
></script>
<!-- the version of marked must be less than 4 -->
<script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
<!-- end for docsify katex -->
</head>
<body>
<div id="app"></div>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<script>
window.$docsify = {};
</script>
<!-- insert script before docsify.js-->
<script>
// import katex from "katex";
// import marked from "marked";
(function () {
let oldMarkdown = window.$docsify.markdown;
let newMarked = marked;
let newM = JSON.stringify(newMarked);
function newMarkdown(originMarked, originRenderer) {
// let newMarked = marked; // in docsify.js: window.$marked = marked
function isFn(obj) {
return typeof obj === "function";
}
const mathExtension = {
name: "math",
level: "inline",
start(src) {
let index = src.match(/\$/)?.index;
return index;
},
tokenizer(src, tokens) {
const blockRule = /^\$\$((\\.|[^\$\\])+)\$\$/;
const inlineRule = /^\$((\\.|[^\$\\])+)\$/;
let match;
if ((match = blockRule.exec(src))) {
return {
type: "math",
raw: match[0],
text: match[1].trim(),
mathLevel: "block",
};
} else if ((match = inlineRule.exec(src))) {
return {
type: "math",
raw: match[0],
text: match[1].trim(),
mathLevel: "inline",
};
}
},
renderer(token) {
if (token.mathLevel === "block") {
return (
'<div class="math">' +
katex.renderToString(token.text, {
throwOnError: false,
displayMode: true,
}) +
"</div>"
);
} else if (token.mathLevel === "inline") {
return (
'<span class="math">' +
katex.renderToString(token.text, {
throwOnError: false,
displayMode: false,
}) +
"</span>"
);
}
},
};
const merge =
Object.assign ||
function (to) {
for (let i = 1; i < arguments.length; i++) {
const from = Object(arguments[i]);
for (const key in from) {
if (hasOwn.call(from, key)) {
to[key] = from[key];
}
}
}
return to;
};
let opts = oldMarkdown || {};
if (isFn(oldMarkdown)) {
opts = originMarkdonw.apply(
this, // this original
originMarked,
originRenderer
).defaults;
} else {
opts = merge(oldMarkdown, {
renderer: merge(originRenderer, oldMarkdown.renderer),
});
}
newMarked.setOptions(opts);
newMarked.use({ extensions: [mathExtension] });
return newMarked;
}
window.$docsify.markdown = newMarkdown;
})();
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.js"></script>
</body>
from docsify-katex.
Thanks for @dzylikecode 's great work, you can follow the README.md to use whichever katex version you want.
from docsify-katex.
Related Issues (20)
- About {subarray} and \substack HOT 8
- The default font style should be italic HOT 3
- Docsify latex in different positions are invalid HOT 9
- How to change the default font of formulas? HOT 2
- How to use this plugin? HOT 3
- I copy the ketex words in your index.html, but I can not get the latex equations. HOT 4
- how to render italic latex equations by default? HOT 1
- c194a9ef will render as $
- 1.5.0 is incompatible and many docsify page are crash HOT 3
- Not working after the latest update HOT 3
- Uncaught TypeError: Cannot read properties of undefined (reading 'renderer') HOT 1
- Maybe some problems caused by the update HOT 1
- Can you adapt to marked@4 ? HOT 2
- Uncaught ReferenceError: marked is not defined HOT 4
- Bug report - some LaTex cannt render correctly. HOT 5
- The katex maybe not work HOT 2
- how to use?
- Problem with "not equal" Math Symbol always render as "equal" Symbol HOT 1
- katex does not show equation HOT 2
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 docsify-katex.