How do I use KaTex from a CDN in my project?

  • I want to create math equations with Katex in my project. Any help you can provide would be appreciated.

    KaTex with the CDN link->https://katex.org/docs/browser.html

    I have read this forum post (and many others) ->https://www.construct.net/en/forum/construct-3/general-discussion-7/latex-text-editor-c3-145256

    I have addons CSS and HTML Element both by Strani Anelli el3um4s

    Here is main.js that is in Scripts folder.

    // Import any other script files here, e.g.:
    // import * as myModule from "./mymodule.js";
    
    runOnStartup(async runtime =>
    {
    	// Code to run on the loading screen.
    	// Note layouts, objects etc. are not yet available.
    	
    	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
    	runtime.addEventListener("beforeprojectstart", () => LoadExternalScript(runtime));
    });
    
    async function LoadExternalScript(runtime)
    {
    	await runtime.assets.loadScripts("https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js");
    }
    
    async function OnBeforeProjectStart(runtime)
    {
    	// Code to run just before 'On start of layout' on
    	// the first layout. Loading has finished and initial
    	// instances are created and available to use here.
    	
    	runtime.addEventListener("tick", () => Tick(runtime));
    }
    
    function Tick(runtime)
    {
    	// Code to run every tick
    }

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I've been randomly trying different things and I somewhat got this to work.

    First off, I went to MathJax and LaTex instead of KaTex. I also used the example code for that C3 LaTeX thread.

    main.js is standard except for this line

    import * as MathJax from "./load-mathjax.js";
    

    I can get LaTex to render right the first time I provide the CDN link. It won't work after that unless I change the CND link again. Is there some kind of a Cashe or some other one time only run setting?

    load-mathjax.js

    window.MathJax = {
     tex: {
     inlineMath: [['$', '$'], ['\\(', '\\)']]
     },
     svg: {
     fontCache: 'global'
     }
    };
    
    (function () {
     var script = document.createElement('script');
     script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3.1.4/es5/tex-chtml-full.js';
     script.async = true;
     document.head.appendChild(script);
    })();
    
    // script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML';
    
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)