Jump to content
Sign in to follow this  
Czar

KaTex

Recommended Posts

Hi everyone,

 

Once again I am trying to incorporate a JS library into my SMS files. 

 

https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js

 

https://katex.org/docs/api.html

I can put the code below into the custom template

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

 

I would like to render a maths string into the caption of a label but I don't understand how I do that.

 

I am hoping someone can help explain or show me how to set up KaTex inside the form and how to access the functions in the JS file..

 

lbl.caption := myKatex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");

 

 

 

 

Share this post


Link to post
Share on other sites

A quick solution :

have a form with a panel and a button

in the custom template add these lines

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script>

 

in the onclick handler of the button add this code

procedure TForm1.W3Button1Click(Sender: TObject);
begin

  var katexelement : variant;
  katexelement := W3Panel1.handle;

  asm
  katex.render("c = \\pm\\sqrt{a^2 + b^2}", @katexelement, {
    throwOnError: false
  });
  end;

end;

 

which results in this :

 

Capture2.jpg

 

This code can be improved a bit.

F.i. I like to load the js library under program control, so at least you know when it is ready

 

Share this post


Link to post
Share on other sites

//------ typescript definition -------

/** Documentation: https://katex.org/docs/options.html */
export interface KatexOptions {
    /**
     * If `true`, math will be rendered in display mode
     * (math in display style and center math on page)
     *
     * If `false`, math will be rendered in inline mode
     * @default false
     */
    displayMode?: boolean;
    /**
     * If `true`, KaTeX will throw a `ParseError` when
     * it encounters an unsupported command or invalid LaTex
     *
     * If `false`, KaTeX will render unsupported commands as
     * text, and render invalid LaTeX as its source code with
     * hover text giving the error, in color given by errorColor
     * @default true
     */
    throwOnError?: boolean;
    /**
     * A Color string given in format `#XXX` or `#XXXXXX`
     */
    errorColor?: string;
    /**
     * A collection of custom macros.
     *
     * See `src/macros.js` for its usage
     */
    macros?: any;
    /**
     * If `true`, `\color` will work like LaTeX's `\textcolor`
     * and takes 2 arguments
     *
     * If `false`, `\color` will work like LaTeX's `\color`
     * and takes 1 argument
     *
     * In both cases, `\textcolor` works as in LaTeX
     *
     * @default false
     */
    colorIsTextColor?: boolean;
    /**
     * All user-specified sizes will be caped to `maxSize` ems
     *
     * If set to Infinity, users can make elements and space
     * arbitrarily large
     *
     * @default Infinity
     */
    maxSize?: number;
    /**
     * Limit the number of macro expansions to specified number
     *
     * If set to `Infinity`, marco expander will try to fully expand
     * as in LaTex
     *
     * @default 1000
     */
    maxExpand?: number;
    /**
     * Allowed protocols in `\href`
     *
     * Use `_relative` to allow relative urls
     *
     * Use `*` to allow all protocols
     */
    allowedProtocols?: string[];
    /**
     * If `false` or `"ignore"`, allow features that make
     * writing in LaTex convenient but not supported by LaTex
     *
     * If `true` or `"error"`, throw an error for such transgressions
     *
     * If `"warn"`, warn about behavior via `console.warn`
     *
     * @default "warn"
     */
    strict?: boolean | string | Function;
}

export class ParseError implements Error {
    constructor(message: string, lexer: any, position: number);
    name: string;
    message: string;
    position: number;
}

/**
 * Renders a TeX expression into the specified DOM element
 * @param tex A TeX expression
 * @param element The DOM element to render into
 * @param options KaTeX options
 */
export function render(tex: string, element: HTMLElement, options?: KatexOptions): void;
/**
 * Renders a TeX expression into an HTML string
 * @param tex A TeX expression
 * @param options KaTeX options
 */
export function renderToString(tex: string, options?: KatexOptions): string;
//----------------

// ====>- pascal external class definition  <====

unit katex;

interface

uses 
  System.Types, W3C.HTML5, W3C.DOM;

type
  TJSKatexOptions = class external 'Object'
    displayMode: Boolean; // nullable
    throwOnError: Boolean; // nullable
    errorColor: String; // nullable
    macros: Variant; // nullable
    colorIsTextColor: Boolean; // nullable
    maxSize: Float; // nullable
    maxExpand: Float; // nullable
    allowedProtocols: TStrArray; // nullable
    &strict: Variant; {Boolean or String or JFunction} // nullable
  end;

type
  TJSKatex = class external 'katex'
  public
    class procedure render(tex: String; element: JHTMLElement); overload; external 'render';
    class procedure render(tex: String; element: JHTMLElement; options: TJSKatexOptions); overload; external 'render';
    class function renderToString(tex: String): String; overload; external 'renderToString';
    class function renderToString(tex: String; options: TJSKatexOptions): String; overload;external 'renderToString';
  end;

type
  TJSParseError = class external 'katex.ParseError'
    constructor Create(const msg: String; lexer: Variant; position: Float);
    name: String;
    &message: String;
    position: Float;
  end;

implementation

end.

//---------------------------------------------------------------------

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...