upupming / docsify-katex Goto Github PK

View Code? Open in Web Editor NEW

81.0 81.0 30.0 610 KB

:symbols: KaTeX support for docsify

Home Page: https://upupming.site/docsify-katex/docs

License: MIT License

JavaScript 100.00%

demo docsify docsify-katex katex katex-support mathjax

docsify-katex's Introduction

docsify-katex

Add KaTeX support to your docsify project.

Usage

Add docsify-katex JS and CSS scripts to your index.html:

<script src="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
<script src="//cdn.jsdelivr.net/npm/marked@4"></script>

<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->

Note:

gh/upupming/docsify-katex@latest/dist/docsify-katex.js will always fetch the latest version of docsify-katex on GitHub, you can use it when you want to try the latest dev features.

Demo projects

Name	Website	Source code
`docsify-katex` documentation	upupming.site/docsify-katex/docs	upupming/docsify-katex/docs
Firebook	yngtodd.github.io/firebook	yngtodd/firebook

If you have an awesome project using docsify-katex and want to share it with others, please leave it at this issue. I will add it here as soon as possible.

LaTeX quick reference

Inspired by

Credits

KaTeX

Known issues

Making KaTeX work properly with docsify is a hard work, this repo is just a workaround. We used an extra marked instance to do the syntax parsing.

docsify-katex's People

Contributors

Stargazers

Watchers

docsify-katex's Issues

The default font style should be italic

Describe the bug
The default font style of KaTeX math block should be italic, not normal.

To Reproduce
For an example, type following texts in the Markdown:

$$\begin{aligned}
f:&A\to B\\
&a\mapsto b
\end{aligned}$$

Expected behavior
Rendered as italic font, like this way:

(Rendered by VS Code extension Markdown-All-in-One with KaTeX engine)

But with docsify-katex, I got:

which seems ugly.

Screenshots
Shown above.

Desktop (please complete the following information):

OS: Windows 10
Browser version: Chromium Edge/83.0.478.61
docsify version: 4.11.4
docsify-katex version: 1.4.3

Additional context
None.

The katex maybe not work

Describe the bug
The katex maybe not work

To Reproduce
Steps to reproduce the behavior:

Go to https://github.com/zy19970/KnowledgeBase
the Github Page https://zy19970.github.io/KnowledgeBase/#/latex
See error

Expected behavior
It is just a example.

Screenshots

Desktop (please complete the following information):

OS: Win 11
Browser version[Microsoft Edge106.0.1370.52]
docsify 4.4.4
docsify-katex 2.0.0

Docsify latex in different positions are invalid

Describe the bug
Docsify latex in different positions of the same file are invalid

To Reproduce
Steps to reproduce the behavior:

add code

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
<script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script>

white markdown article, use latex like this PythonTutorial.md
add latex to beginning of article, add below latex to middle of the article.

Latex as:
```
$$x=\frac {-b±\sqrt{b^2-4ac}}{2a}$$
```

Expected behavior
Latex in all positions are valid

Screenshots
beginning of article latex normal analysis：

markdown file:

show:

Latex doesn't seem to parse at the middle of the article:
markdown file:

show:
${)_KNNO$GS3YOG LNV2ZFG1$

Desktop (please complete the following information):

Browser version:Chrome 87.0.4280.66（正式版本）（64 位）
docsify version :4.4.1
docsify-katex version:1.4.3

Additional context
I try latex below code, or latex above code both show nomal.
But also it’s not work in this position：

Please help me check why it doesn't work.

1.5.0 is incompatible and many docsify page are crash

Browser version[104.0.5112.101 (arm64)]
After going back to version 1.4.5 everything was fine

Scrolling fails when adding katex

I am finding when I add the required scripts to my index.html, katex renders properly, but I am unable to scroll on any of the pages of my site. I am hosting on GitHub's pages. Here is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Firebook</title>
  <link rel="icon" href="_media/orange_slime.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="./theme.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'Firebook',
      repo: 'yngtodd/firebook',
      coverpage: true,
      loadSidebar: true,
      loadNavbar: false,
      maxDepth: 2,
      subMaxLevel: 2,
      basePath: 'https://raw.githubusercontent.com/yngtodd/firebook/master/docs',
      search : [
        '/',
        '/overview',
        '/getting_started/',
      ]
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
</body>
</html>

How to change the default font of formulas?

The former one is the current default font and I'd like to change to the latter one. How can I change the configuration in order to achieve this?

how to render italic latex equations by default?

Thank you for your great plugin, but when I use it following the instrction on the project main page, I found that the latex equations are not rendered in italic font. For example , the markdown file is :

$$x=f(x)$$

and the website shows:

but I want it to be rendered as:

just as other websites or origin latex format.

I doubt that I don't use correct font, but I don't know how to make it right. Do you have any idea about it?

c194a9ef will render as $

The string 'c194a9ef' won't be rendered correctly.

Demo projects

Hi, all docsify-katex users:

Thanks for using docsify-katex and I really hope people can benefit from this small project. If you would like to share your works and configuration of docsify-katex, You can leave your site here, and I will add it to demo projects, welcome! 👋

求助 help

请问使用docsify-katex会影响原来的网页的样式和布局吗？

Problem with "not equal" Math Symbol always render as "equal" Symbol

Describe the bug
For math symbol "not equal" sign which used "$\neq$" always render as "equal",
I tried "\nequl, \neq,\ne" all render as equal

To Reproduce
Steps to reproduce the behavior:

Go to '...' (give demo projects on GitHub if possible)
Click on '....'
Scroll down to '....'
See error

Expected behavior
$\neq$ will render "not equal" math symbol

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Mac OS
Browser version[e.g. Chrome 72.0.3626.121]

Additional context
Add any other context about the problem here.

Uncaught TypeError: Cannot read properties of undefined (reading 'renderer')

docsify-katex.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'renderer')
at window.$docsify.markdown (docsify-katex.js:1:889)
at new xt ([email protected]:1:66821)
at Lt ([email protected]:1:75127)
at Ut._init ([email protected]:1:83415)
at new Dt ([email protected]:1:82689)
at HTMLDocument. ([email protected]:1:89610)

最新版本报错，1.4.5 没问题。

Not working after the latest update

Hello,

Thanks for the plugin, it's been really great! However, after the latest update, it's not working anymore. I have to get rid of the corresponding code in the index file to have my blog back to work. I tried your new usage of the plugin (seems like four lines code), it's still not working. Is it possible to offer a solution so that I can use the plugin like the way before?

Thanks a lot!

您好，非常感谢您的插件，非常好用！但是在您最新一次更新后，它不能工作了，我的整个博客都打不开（仅能显示loading），不得不把之前的两行代码去掉。我尝试了您更新后的新用法（四行代码），依然不管用。如果可能的话，有没有办法同时提供一下能够使用之前版本的方法？非常感谢！

Uncaught ReferenceError: marked is not defined

Describe the bug

Uncaught ReferenceError: marked is not defined
    at docsify-katex.js:1:44
    at docsify-katex.js:1:951

If I put the line <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script> before <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> like the demo project, it throws the exception. If I do the opposite, the error ceases but equations won't get rendered.

Not sure if I use it wrong, or it's a bug.

To Reproduce

Here's my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      coverpage: true,
      onlyCover: true,
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

docsify-katex breaks sidebar expansion and mermaid support

When I add docsify-katex to the index.html page, the sidebar no longer expands to show the headers. It also does no longer converts the headers to links. Also, when added, mermaid code blocks no longer render, but are displayed in a code block instead.

Maybe some problems caused by the update

Describe the bug

Previously I was using the following CDN：

<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>

But just recently, I found that the formula rendering was invalid. After replacing the current CDN file, I found that the support for the mhchem package was lost.

current CDN:

<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>

To Reproduce
Steps to reproduce the behavior:

A website for demos of mhchem: https://docs.moodle.org/400/en/Chemistry_notation_using_mhchem
You can use demos in the website above to test
A complex demo of my own :

$$\ce{葡萄糖-6-磷酸 ->[\color{#F65353}{葡萄糖-6-磷酸脱氢酶}、\color{#58B1FF}{Mg^{2+}}][\color{#7EC636}{NADP+\ \nearrow \quad \searrow\ NADPH + H+}] 葡萄糖-6-膦酸内酯}$$

Expected behavior
My demo should be like:

Screenshots
The current version renders as:

Desktop (please complete the following information):

OS: Windows 11 Pro 21H2
Browser version: Chrome 105.0.1343.33
docsify version: latest
docsify-katex version: latest

Additional context
Add any other context about the problem here.

About {subarray} and \substack

Hi, do you have any plan to support {subarray} and \substack?

[BUG] 设置 renderer 属性前，需要先确认 markdown 对象是否存在

问题在这段代码

docsify-katex/src/index.js

Lines 24 to 29 in 8b0d8e8

    
           $docsify.plugins = [].concat(install, $docsify.plugins); 
        
           // em, strong & codespan will be rendered by markdown-it instead of marked 
        
           $docsify.markdown.renderer.em = text => text; 
        
           $docsify.markdown.renderer.strong = text => text; 
        
           $docsify.markdown.renderer.codespan = text => text;

如果用户在配置文件内没有配置 markdown，则会抛出错误

docsify-katex/docs/index.html

Lines 25 to 37 in 8b0d8e8

    
             markdown: { 
        
               renderer: { 
        
                 code: function(code, lang) { 
        
                   if (lang === "mermaid") { 
        
                     return ( 
        
                       '<div class="mermaid">' + mermaid.render('mermaid-svg-' + id++, code) + "</div>" 
        
                     ); 
        
                   } 
        
                   return this.origin.code.apply(this, arguments); 
        
                 } 
        
               } 
        
             } 
        
           }

报错如下：Uncaught TypeError: Cannot read property 'renderer' of undefined

Can you adapt to marked@4 ?

我在尝试引入 marked 4.0.0 以上版本的组件时，页面出现了错误。

在 marked 项目的版本更新日志中：

4.0.0 (2021-11-02)
BREAKING CHANGES
Default export removed. Use import { marked } from 'marked' or const { marked } = require('marked') instead.
/lib/marked.js removed. Use /marked.min.js in script tag instead.
When using marked in a script tag use marked.parse(...) instead of marked(...)

我试着修改了源代码第 3 行，let newMarked = marked; -> let newMarked = marked.parse;

经过简单测试，仅改动此处，可以适配最新版本的 marked.js，在使用 marked@2、marked@3 时也暂未发现 bug，供您参考。

I copy the ketex words in your index.html, but I can not get the latex equations.

https://wo315.github.io/meimei/#/
this my website.

can you give me some information, about the problem?

katex does not show equation

this is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
  <!-- CDN files for docsify-katex -->
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '<Name>',
      repo: 'https://github.com/docsifyjs/docsify/',
      loadSidebar: false,
      loadNavbar: true,
      coverpage: true,
      maxLevel: 2,
      subMaxLevel: 1,
      //logo: '/_media/logo.png',
      themeColor: '#3F51B5',
      loadSidebar: true,
      autoHeader: false,
      search: 'auto'
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

am I missing anything?

Bug report - some LaTex cannt render correctly.

Describe the bug
Some LaTex can not render correctly. See https://xhqing.github.io/blog/#/post/%E6%A8%A1%E5%BC%8F%E8%AF%86%E5%88%AB%E4%B8%8E%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/%E4%B8%BB%E6%88%90%E5%88%86%E5%88%86%E6%9E%90%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3

Mardown file at: https://github.com/xhqing/blog/blob/main/docs/post/%E6%A8%A1%E5%BC%8F%E8%AF%86%E5%88%AB%E4%B8%8E%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/%E4%B8%BB%E6%88%90%E5%88%86%E5%88%86%E6%9E%90%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3.md

These can render correctly in Typora, Feichu Wiki and Yuque docs.

To Reproduce
Steps to reproduce the behavior:

Go to https://github.com/xhqing/blog
git clone https://github.com/xhqing/blog.git
cd blog and then docsify serve docs

Expected behavior
A clear and concise description of what you expected to happen.
Render correctly

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS] MacOS, Darwin Macs-Mac-mini.local 21.5.0 Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64 x86_64
Browser version: Version 105.0.5195.52 (Official Build) (x86_64)
docsify version: docsify-cli version: 4.4.4
docsify-katex version: latest

Additional context
Add any other context about the problem here.

How to use this plugin?

Hello! This looks like a really neat project, however I for the life of me cannot figure it out how to use it and there are no usage instructions at all.

I've tried enclosing my LaTeX code in $$, <code> without any success. Any advise, please?

Can you adapt to the latest version of KAtex?

Please upgrade katex version to 0.16.0, which supports more functions.

how to use?

docs says put <script> and <link> tags in HTML....

Then what?

Using * in code block causes it to disappear

While writing documentation I have a need to use * to display stars as code and to use them as references when detailing how to search with stars. Docsify katex seems to be removing all stars from the code. I tried to backslash escape them and it will display the backslash and still remove the *.

Here are a few examples:

`'*'` Resolves to <code>''</code>
`*` Resolves to <code></code>
`example* ` Resolves to <code>example </code>
`example*` Resolves to <code>example\</code>

Removing the import of docsify-katex resolves the issue.

	$docsify.plugins = [].concat(install, $docsify.plugins);

	// em, strong & codespan will be rendered by markdown-it instead of marked
	$docsify.markdown.renderer.em = text => text;
	$docsify.markdown.renderer.strong = text => text;
	$docsify.markdown.renderer.codespan = text => text;

	markdown: {
	renderer: {
	code: function(code, lang) {
	if (lang === "mermaid") {
	return (
	'<div class="mermaid">' + mermaid.render('mermaid-svg-' + id++, code) + "</div>"
	);
	}
	return this.origin.code.apply(this, arguments);
	}
	}
	}
	}

upupming / docsify-katex Goto Github PK

docsify-katex's Introduction

docsify-katex

Usage

Demo projects

LaTeX quick reference

Inspired by

Credits

Known issues

docsify-katex's People

Contributors

Stargazers

Watchers

Forkers

docsify-katex's Issues

Recommend Projects

Recommend Topics

Recommend Org