Display math with KaTex and AngularJS.
You can get it from Bower
bower install angular-katexor npm
npm install angular-katexLoad the script files in your application:
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/katex/dist/katex.min.js"></script>
<script type="text/javascript" src="bower_components/angular-katex/angular-katex.js"></script>Add the specific module to your dependencies:
angular.module('myApp', ['katex', ...])<!-- Tag element -->
<katex>x^2</katex>
<!-- Attribute -->
<div katex>x^2</div>
<!-- Attribute value -->
<div katex="x^2"></div>
<!-- expr attribute value -->
<katex expr="x^2"></katex>
<!-- Bind to scope
$scope.tex = {pow: 'x^2'}
-->
<katex bind="tex.pow"></katex>
<!-- Set display mode -->
<katex expr="x^2" display-mode></katex>
<!-- Set error handler -->
<!-- on-error locals:
$expr: (string) expression
$err: (object) error
$setText: (function) set element text
-->
<katex expr="\" on-error="$setText('Bad Expression: ' + $expr + ' . ' + $err)"></katex>
<!-- Use auto-render -->
<div katex auto-render>
<p>The following formula is rendered</p>
$$x^2$$
</div>To use the auto-render extension,
the file auto-render.min.js is needed.
If you installed katex with bower, it is inside bower_components/katex/dist/contrib.
katexConfigProvider have the following properties:
defaultOptions: object that is passed to thekatex.renderfunction as the options parameter. By default, it is{}.errorHandler: function that is called when there is an error while parsing the expression. It has three parameters:error,expression,element. It does not get called ifkatexOnErrordirective is used. By default, it appends a span element with the error message and thekatex-errorclass:<span class="katex-error">Error: message</span>. This function can be used to use MathJax as a fallback.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent