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

Post reply

❤Follow Topic(2)

0 favourites

2 posts

From the Asset Store

Archer Project

$10 USD

With this template you can create your own archer game and customize it however you want.

clarkvr

Jase5z
- Joined 28 Jan, 2013
- 10 topics • 28 posts
1

5 Jun, 2021
Quote

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
- Jase5z
- - Joined 28 Jan, 2013
  - 10 topics • 28 posts
- 1
- 7 Jun, 2021
- Quote
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';