Git Product home page Git Product logo

plugin-katex's Introduction

plugin-katex

为默认编辑器和文章渲染提供 KaTeX 支持。

KaTeX

使用方式

  1. 下载,目前提供以下两个下载方式:
  2. 安装,插件安装和更新方式可参考:https://docs.halo.run/user-guide/plugins

用法说明

默认编辑器

  1. 方式一:在默认编辑器中,使用 $ 开头和结尾的语句将会被渲染为 KaTeX 行内公式,输入 $$ 并回车可以插入 KaTeX 块级公式。
  2. 方式二:在编辑器顶部工具栏的工具箱中点击 KaTeX 块级公式 或者 KaTeX 行内公式 即可插入块级公式和行内公式。
  3. 方式三:在指令菜单(/)中选择 KaTeX 块级公式 或者 KaTeX 行内公式 即可插入块级公式和行内公式。

文章页渲染公式

此插件安装之后,文章页使用 KaTeX.js 渲染公式,插件支持 2 个配置项。

  1. 行内公式 CSS 选择器

    CSS Selector 语法,用来查找渲染的行内公式 Dom。

    默认值为:[math-inline](本插件扩展默认编辑器生成的行内公式 Dom),如需兼容其他编辑器,则设置为相应的 Selector 即可。

    已知编辑器:

    ByteMD.math-inline

    StackEdit.katex--inline

    如同时使用多个编辑器,CSS Selector 之间用 , 隔开即可。

    如:[math-inline],.math-inline,.katex--inline

  2. 块级公式 CSS 选择器

    CSS Selector 语法,用来查找渲染的块级公式 Dom。

    默认值为:[math-display]

    已知编辑器:

    ByteMD.math-display

    StackEdit.katex--display

开发环境

git clone [email protected]:halo-sigs/plugin-katex.git

# 或者当你 fork 之后

git clone [email protected]:{your_github_id}/plugin-katex.git
cd path/to/plugin-katex
# macOS / Linux
./gradlew pnpmInstall

# Windows
./gradlew.bat pnpmInstall
# macOS / Linux
./gradlew build

# Windows
./gradlew.bat build

修改 Halo 配置文件:

halo:
  plugin:
    runtime-mode: development
    classes-directories:
      - "build/classes"
      - "build/resources"
    lib-directories:
      - "libs"
    fixedPluginPath:
      - "/path/to/plugin-katex"

plugin-katex's People

Contributors

guqing avatar ruibaby avatar xinkeng0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

plugin-katex's Issues

feat: KaTeX compatibility

目前插件正常情况下可以工作,但是需要做一些兼容性方面的改进 。

KaTeX Auto-render Extension

目前公式渲染的方式为:

renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\(', right: '\)', display: false},
              {left: '\[', right: '\]', display: true}
          ],
          // 鈥� rendering keys, e.g.:
          throwOnError : false
        });

可能的改进点:

  1. document.body 需要更换为特定的Dom标记,例如 <Math></Math>
    必须修改此项,来最大限度解决错误处理等类似问题。
  1. 相应的更新richer-editor公式生成的Dom结构以支持改动。

pjax适配性问题

1768b19f79755763d2a60dffbcc0345

katex调用方法封装,提供给主题调用,解决pjax适配性问题

stackedit 编辑器下无法渲染 Katex 公式

Katex 插件启用后无法正常渲染 Katex 公式,无论是行间公式,行内公式均无法正常显示

katex 代码:

$$n_{ka} = \sum \limits_{i = 1}^a {(i -1) \times k + 1} = \frac {(1 + k(a - 1) + 1) \times a}{2}$$

$n_{ka} = \sum \limits_{i = 1}^a {(i -1) \times k + 1} = \frac {(1 + k(a - 1) + 1) \times a}{2}$

$$
n_{ka} = \sum \limits_{i = 1}^a {(i -1) \times k + 1} = \frac {(1 + k(a - 1) + 1) \times a}{2}
$$

以上代码均无法正常渲染

blog 链接:https://blog.kierankihn.com/archives/test

无法正确显示latex中上标的写法

环境

docker halo 2.14.0;katex 2.1.0

issue描述

在markdown编辑器中书写$^{[1]}$可以正常显示为上标,但发布后无法正常显示,显示为latex原文$^{[1]}$

md编辑器怎么用这个?

我想要渲染Latex公式,
stackedit: .katex--inline
这一行配置要加在哪里?插件那里写的没看懂

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.