ng-katex

授权协议 MIT License
开发语言
所属分类 企业应用、 LaTeX排版系统
软件类型 开源软件
地区 不详
投 递 者 拓拔烨赫
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ng-KaTeX

Travis

Description

Angular module to write beautiful math expressions in TeX syntax boosted by KaTeX library.You can see a demo here.

Install

To install the module you can simply type it on your command line:

npm install ng-katex --save

To add the module to your project add the KatexModule to import's field of your parent module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { KatexModule } from 'ng-katex';

import { AppComponent } from './app/app.component';

@NgModule({
  imports: [
    BrowserModule,
    KatexModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Important!

If you're using angular-cli, add the katex css import to your styles.css:

@import '~katex/dist/katex.css';

If you're not using the angular-cli, import the stylesheet to your index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.0/katex.min.css">

Usage

You can write a LaTeX equation as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex [equation]="equation"></ng-katex>`
})
export class AppComponent {
  equation: string = '\\sum_{i=1}^nx_i';
}

Also, you can add options to ng-katex components with:

import { Component } from '@angular/core';

import { KatexOptions } from 'ng-katex';

@Component({
  selector: 'my-app',
  template: `<ng-katex [equation]="equation" [options]="options"></ng-katex>`
})
export class AppComponent {
  equation: string = '\\sum_{i=1}^nx_i';
  options: KatexOptions = {
    displayMode: true,
  };
}

The options object structure is defined here.

If you want to write a paragraph with LaTeX equations, you can do it as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex-paragraph [paragraph]="paragraph"></ng-katex-paragraph>`
})
export class AppComponent {
  paragraph: string = `
    You can write text, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know.
    You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$.
    In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$.
    To scape the \\$ symbol it's mandatory to write as follows: \\\\$
  `;
}

If you want to write HTML with LaTeX equations, you can do it as follows: (Security Note: this bypasses Angular DOM Sanitization)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex-html [html]="html"></ng-katex-html>`
})
export class AppComponent {
  html: string = `
    <div>You can write html, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know. You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$. In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$. To scape the \\$ symbol it's mandatory to write as follows: \\\\$</div><p>: <button>I'm a button</button></p>
  `;
}

Contributors

Changelog

See changelog page to get info about release changes.

Contributing

See CONTRIBUTING.md

License

ng-katex is licensed under MIT license.

  • 这个其实网上有很多教程,但是我还是看那些教程看了很久都没有看明白。 ngx-echarts确实很好用哈。想复用一个div来渲染不同的数据。 <div echarts class="echartsBox" [options]="chartOption1"></div> 开始呢就这样绑定一个对象就搞定了,至于对象里面有什么,随便复制一个echart-demo就可以看到效果了。然后需求是会请求不同的数据

  • ngrx github地址 https://github.com/ngrx/platform  里面有一个的例子 ngrx是有几个概念 store state reducer effect action 关于store state reducer action的例子网上也不少 但effect的介绍还没有看到中文版的。 state是一个有语义的全局数据, state中还可以有state 一个stat

  • 一、ng-content ng-content是内容映射指令(也叫内容嵌入),相当于vue中的slot内容分发,内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用。 使用方法:https://blog.csdn.net/yw00yw/article/details/90175624 ng-content相当于一个占位符(留了个位置),类似于路由出口rou

  • 最近在开始看nginx的事件模块,经常看到ngx_cycle_t、ngx_connection_t和ngx_listening_t这三个结构体,刚开始没在意,看到了就重新上网变量的意思,后来觉得不弄懂这三个结构体或者不清出其中变量的意义实在是无法看下去,因为有很多函数都涉及这三个结构体。因为ngx_listening_t存储监听有关的信息,ngx_connection_t存储连接有关的信息和读写事

  • 参考: container和template的区别:https://www.jianshu.com/p/388461631b1d ng-content:https://www.cnblogs.com/laixiangran/p/8723166.html https://blog.csdn.net/wuyuxing24/article/category/7912821

 相关资料
  • 问题内容: 我试图了解和/ 之间的区别,但对我来说它们看起来相同。 我应该记住使用一个或另一个来区别吗? 问题答案: ngIf 该指令根据表达式 删除或重新创建 DOM树的一部分。如果赋值为的表达式的计算结果为假值,则将元素从DOM中删除,否则将元素的克隆重新插入DOM中。 删除元素时,使用它的作用域将被销毁,并在恢复该元素时创建一个新的作用域。在内部创建的作用域使用原型继承从其父作用域继承。 如

  • 问题内容: 任何人都可以为该JSFiddle提供正确的方法: JsFiddle链接 我正在尝试通过.class&#ID更改元素的类。 提前致谢 感谢tymeJV,新的JSFiddle: 解 问题答案: 正确的方法是根据切换变量使用,请考虑: CSS: JS: HTML: 通过根据变量(“ toggle”)是否为或分配引用的类(在上面为“红色”)来工作。

  • 问题内容: 我了解这一点,并会影响在元素上设置的类,并控制是否将元素呈现为DOM的一部分。 有没有对选择的准则在/ 或反之亦然? 问题答案: 取决于您的用例,但总结不同之处: 将从DOM中删除元素。这意味着您所有的处理程序或所有附加到这些元素的内容都将丢失。例如,如果将单击处理程序绑定到子元素之一,则将其评估为false时,将从DOM中删除该元素,并且即使稍后将其评估为true并显示该元素,您的单

  • NG Bootstrap 是基于 Angular(非 Angular.js)开发的 Bootstrap CSS 框架的指令集。 原生开发 专为Bootstrap 4 开发的Angular组件,开发了符合Angular生态系统的API,没有使用任何第三方Javascript库来实现,全都是纯粹的原生Javascript。 Boostrap的JS插件 支持全部Boostrap自带的Javascript

  • Mogwai ERDesigner NG是一个实体关系建模工具类似于ERWin。它设计成让数据库建模变得尽可能简易并为整个开发过程提供支持,从数据库设计到模式 (schema)和代码生成。此外ERDesigner还提供一个灵活的插件体系,从而可以通过安装新的插件来扩展该工具的功能。ERDesigner提 供的功能包括: *.能够使用一个强大和易于使用的图形编辑来设计数据库模型。 *.能够依据ER图

  • ng-inspector 是Chrome和Safari的浏览器扩展程序,它显示一个检查器面板,该面板实时显示当前页面中的AngularJS作用域层次结构,以及哪些控制器或指令与哪个作用域相关联。 将鼠标悬停在检查器中的范围上将突出显示该范围附加到的DOM元素。单击模型将console.log该模型的内容。 该扩展程序在带有AngularJS徽标的地址栏旁边添加了一个按钮,用于打开和关闭窗格。