react-katex

Display math in TeX with KaTeX and ReactJS
授权协议 MIT License
开发语言
所属分类 企业应用、 LaTeX排版系统
软件类型 开源软件
地区 不详
投 递 者 班凌
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

react-katex


Display math expressions with KaTeX and React.

Examples

(based on the https://github.com/talyssonoc/react-katex)
(the readme and the demo are "forked" from https://github.com/talyssonoc/react-katex)


Comparison with react-katex: https://github.com/talyssonoc/react-katex/issues/49.

Installation

$ npm install katex @matejmazur/react-katex
  # or
  $ yarn add katex @matejmazur/react-katex

Usage

import 'katex/dist/katex.min.css';
import TeX from '@matejmazur/react-katex';

Inline math

Display math in the middle of the text.

ReactDOM.render(
  <TeX math="\int_0^\infty x^2 dx" />,
  document.getElementById('math')
);

// or

ReactDOM.render(
  <TeX>\int_0^\infty x^2 dx</TeX>,
  document.getElementById('math')
);

It will be rendered like this:

Inline math

Block math

Display math in a separated block, with larger font and symbols.

ReactDOM.render(
  <TeX math="\int_0^\infty x^2 dx" block />,
  document.getElementById('math')
);

// or

ReactDOM.render(
  <TeX block>\int_0^\infty x^2 dx</TeX>,
  document.getElementById('math')
);

It will be rendered like this:

Block math

Note:
Don't forget to import KaTeX CSS file.

import 'katex/dist/katex.min.css';

Error handling

Default error message

By default the error rendering is handled by KaTeX. You can optionally pass errorColor (defaults to #cc0000) as a prop:

ReactDOM.render(
  <TeX math={'\\int_0^\\infty x^2 dx \\inta'} errorColor={'#cc0000'} />,
  document.getElementById('math')
);

This will be rendered like so:

KaTeX error

Custom error message

It's possible to handle parse errors using the prop renderError. This prop must be a function that receives the error object and returns what should be rendered when parsing fails:

ReactDOM.render(
  <TeX
    math="\\int_{"
    renderError={(error) => {
      return <b>Fail: {error.name}</b>;
    }}
  />,
  document.getElementById('math')
);

// The code above will render '<b>Fail: ParseError</b>' because it's the value returned from `renderError`.

This will render <b>Fail: ParseError</b>:

renderError

Custom wrapper component

You can change the wrapper component (block math uses div and inline uses span) by whatever you want via props.as attribute.

ReactDOM.render(
  <TeX
    math="y = x^2"
    as="figcaption"
  />,
  document.getElementById('math')
);

Escaping expressions

In addition to using the math property, you can also quote as a child allowing the use of { } in your expression.

ReactDOM.render(
  <TeX>{'\\frac{\\text{m}}{\\text{s}^2}'}</TeX>,
  document.getElementById('math')
);

Or Multiline

ReactDOM.render(
  <TeX>{`\\frac{\\text{m}}
{\\text{s}^2}`}</TeX>,
  document.getElementById('math')
);

However, it can be annoying to escape backslashes. This can be circumvented with the String.raw tag on a template literal when using ES6.

ReactDOM.render(
  <TeX>{String.raw`\frac{\text{m}}{\text{s}^2}`}</TeX>,
  document.getElementById('math')
);

Backticks must be escaped with a backslash but would be passed to KaTeX as \`. A tag can be created to replace \` with `

const latex = (...a) => String.raw(...a).replace('\\`', '`');
ReactDOM.render(<TeX>{latex`\``}</TeX>, document.getElementById('math'));

You can even do variable substitution

const top = 'm';
const bottom = 's';
ReactDOM.render(
  <TeX>{String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}</TeX>,
  document.getElementById('math')
);

Configuring KaTeX

You can change directly all KaTeX options via props.settings:

Example of adding a custom macro:

ReactDOM.render(
  <TeX settings={{ macros: { '*': '\\cdot' } }}>y = k * x + c</TeX>
);

Result:

macros

  • npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org –以上是安装淘宝镜像 npm install -g create-react-app create-react-app my-app cd my-app – my

  • 一、什么是 Hooks React 一直都提倡使用函数组件,但是有时候需要使用 state 或者其他一些功能时,只能使用类组件,因为函数组件没有实例,没有生命周期函数,只有类组件才有 Hooks 是 React 16.8 新增的特性,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其

 相关资料
  • 问题内容: 我注意到可以这样导入: …或像这样: 第一个导入模块中的所有内容(请参阅:导入整个模块的内容) 第二个仅导入模块导出(请参阅:导入默认值) 似乎这两种方法是不同的,并且根本上是不兼容的。 为什么它们都起作用? 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里,它似乎与源代码中的 “ hacky”导出机制有关,但尚

  • 这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后,你将学到: 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试,以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使

  • 我已经改用react Native制作跨平台应用程序(虽然没有制作)。我只是想要一个答案,我的问题,反应和反应之间的区别。我在网上搜索了一下,但没有找到合适的答案。

  • 问题内容: 与 哪个更好,为什么? 还是除了以后编写更少的代码外没有其他区别? 写作是否意味着只导入Component对象? 问题答案: 让您代替。它减少了React名称空间的键入和重复,这通常是一种理想的现代编码约定。 此外,Webpack 2和Rollup之类的工具会“摇晃”,这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/,您可以保证所有React的源代码都将被捆绑。使用,某些工具

  • 本文向大家介绍react-native 启动React Native Packager,包括了react-native 启动React Native Packager的使用技巧和注意事项,需要的朋友参考一下 示例 在最新版本的React Native上,无需运行打包程序。它将自动运行。 默认情况下,这将在端口8081上启动服务器。要指定服务器所在的端口            

  • 我正在使用“React admin”创建一个管理界面(前端)。我正在使用spring boot作为我的REST API。我的React应用程序的url是:“http://localhost:3000”。我的spring boot API的url是:“http://localhost:8080”。 下面是CORS配置的spring boot代码,它在一个单独的类中,称为CORSCONFIG: 下面是

  • 主要内容:React 实例React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上: 在其它代码中,通过 this.refs 获取支撑实例: 完整实例 你可以通过使用

  • 主要内容:React 实例React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 cla