Setting up KaTeX integration (code injection) on Circle.so

In my quest to create an online hub for IB Math students, I've decided to utilize Circle.so as my platform of choice. The diverse range of features offered by Circle.so, such as code injection capabilities and sleek design, make it an appealing option.

An essential feature that the forum tool (like Circle) must possess is the ability to display Math notation (LaTeX) or support code injection for KaTeX or MathJax integration. It appears that KaTeX is the solution to this requirement. Currently, I am in the process of experimenting with the installation of KaTeX, exploring options to inject code in the head section or as a javascript snippet (as depicted in the provided image).

https://i.sstatic.net/qMMW8.jpg

While I lack expertise in programming, I'm hopeful that someone within the community might have experience implementing this setup and could offer assistance. In attempting to include KaTeX in the head section, I attempted the following code (unsuccessfully).

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="412a2035243901716f70746f77">[email protected]</a>/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157e7461706d55253b24203b23">[email protected]</a>/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

For more information on KaTeX, you can refer to their documentation here.

Note: Circle.so offers the ability to insert custom CSS, which may be useful in this context.

javascriptinject

Answer №1

This problem has two parts, one that is relatively easy and the other more challenging.

Issue 1

Deciphering KATEX

The first part involves some simple steps,

We incorporate the necessary scripts and styles onto the page along with our custom script to identify and display text.

This falls under Header code snippets

Note: No defer attribute used to ensure it loads before JS code execution.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b101a0f1e033b4b554a4e554d">[email protected]</a>/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d767c6978655d2d332c28332b">[email protected]</a>/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>

In addition, we include some JavaScript to render KATEX strings.

katex.renderToString( katexText, {
  throwOnError: false
});

Outstanding matters

We are unsure about...

  1. which text should be rendered using Katex.
  2. where to position the rendered text.

Issue 2

Enabling Users to Insert Katex

This presents a challenge as we do not have control over the UI. However, a potential solution could involve utilizing the Code option in the toolbar.

https://i.sstatic.net/YKnfd.png

https://i.sstatic.net/0AL2y.png

To avoid parsing and potentially disrupting all code blocks, we can specify particular ones by introducing a keyword to trigger katex, which in this case is simply katex. Therefore, users would need to include a code block with katex on the first line for our JS script to take over.

This falls under Header code snippets

<script id=''>
    // Locate all `pre` tags
    document.querySelectorAll('.trix-content pre').forEach(function(el) {
        // Extract text content
        var text = el.innerText.replace(/^\s+|\s+$/gm, '');
        // Perform actions if text starts with `latex`
        if (0 === text.indexOf('katex')) {
            var renderedKatex = katex.renderToString(
                text.replace('katex', ''),
                {throwOnError: false}
            );
            // Embed katex and additional markup for styling
            el.outerHTML =
                '<span></span><section class="katex-wrap">' +
                renderedKatex + '</section>';
        }
    })
<script>
Prior to scripts

https://i.sstatic.net/Vb7mf.png

Post scripts installation

https://i.sstatic.net/mSHKX.png

Implemented snippet

....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

launch hyperlink in bootstrap popup

I have a challenge with showcasing multiple videos in a single modal without creating separate modals for each button. The function I found was effective with an older version of Bootstrap, but it no longer works with Bootstrap 3.3.7. Below is the HTML co ...

javascriptjqueryhtmltwitter-bootstrap

Locate the position of the cursor within a rectangular shape

I'm struggling to determine the location of a cursor within a rectangle, specifically which part (one of 4 triangles) it is in. This visual representation helps me grasp it better than any explanation I can come up with :s Working in javascript (whe ...

javascriptjquerymouse-cursor

Encountering a 500 error within a Passport JS and React application

I'm currently developing a chat application using React, and I've hit a roadblock while trying to authenticate users. The axios post request is throwing a 500 error that seems to be elusive. Even when the correct credentials are entered for a use ...

javascriptreactjsauthenticationaxiospassport.js

Synchronously executing Twitter posts

Hello there! I've been using this code found here to embed Twitter posts on my website. It's been working perfectly on certain pages, like in the forums, but I've run into an issue while browsing through user profiles. The post history for e ...

javascriptajaxapitwitter

What is the best way to bring a module into an Angular project?

I have a project in Angular with an additional module created as an npm package. The structure of the module is as follows: --otherModule --other-module.module.ts --index.ts --package.json index.ts: export { OtherModule } from './other-module ...

javascriptangularnpm

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

javascripthtmlangularjs

What is the most effective method for utilizing theme colors: utilizing strings, variables, or referencing the theme object?

I recently installed eslint-plugin-sonarjs and it keeps pointing out that I am using the same string - color from palette - repeatedly. It suggests assigning it to a variable for better management. So, what approach do you think is most effective: Should ...

javascriptreactjsmaterial-ui

Want to automatically redirect the home page? Here's how!

I am trying to automatically redirect the home page after clicking the update button. Below is the code for my handleSubmit function: const handleSubmit = (e) => { e.preventDefault(); // retrieving data from the backend axios .put(`${ ...

javascriptreactjs

Integrate retrieved JSON data using Ajax into D3 visualizations

Could someone please guide me on how to incorporate fetched JSON data using Ajax into D3? I've integrated this example here into my project and now I just want to populate the radial layout with my own data. The image below shows the current bilevel r ...

javascriptjqueryjsonajaxd3.js

What is the best way to hide the background of an extension's HTML?

Currently, I am working on developing a Chrome extension for a university project. However, I am facing challenges in making the background or body of the extension's HTML completely transparent to achieve a cleaner interface. The issue specifically l ...

javascripthtmlcssjson

Managing state in React using a nested object structure with React hooks for adding or updating entries

In my React application, I have a state object that represents a book structure consisting of books, chapters, sections, and items: const book = { id: "123", name: "book1", chapters: [ { id: "123", name: "chapter1", sections: [ ...

javascriptreactjsuse-state

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

javascriptcss

Navigating through a React application with several workspaces - the ultimate guide

Currently, I am working on implementing a monorepo setup inspired by this reference: https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript In this repository, there are 4 distinct locations wher ...

javascriptreactjstypescriptreact-native

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

javascriptcssreactjsmaterial-uistyled-components

Using React: Implementing conditional checks within the render() method of functional Components

When working with my usual React class Components, I typically perform some checks within the render() method before returning conditional html rendering. However, when using a react functional component, I noticed that there is no render() method availabl ...

javascriptreactjsfunction

Alter the database field value in MongoDB without relying on req.body inputs

Is there a way to update a value from X post in my database without using a form in my front end app? I need to trigger the update through a button click instead. Typically, we use req.body to send data from a form. But how do I handle updating the value ...

javascriptnode.jsreactjsmongodb

Rendering deeply nested data in a Vue table

I am currently in the process of updating some older code, transitioning to Vue as a replacement. Everything has been going smoothly except for one specific table that is templated using handlebars. With handlebars and nested {{each}} loops, I can easily ...

javascriptvue.jsvuejs2vue-componenthandlebars.js

Navigating through complex immutable entities

I am having trouble working with multidimensional immutable arrays. I would like to make my array immutable, but I'm not sure how to do so. Consider the following data structure: // data { // item { name: someName, todos: [ ...

javascriptreactjsreduximmutabilityimmutable.js

Creating a new list by grouping elements from an existing list

I have successfully received data from my API in the following format: [ {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"}, {grade: "Grade B", id: 2, ifsGrade: &quo ...

javascriptarraysjsonangulartypescript

Trouble with Ajax transmitting multiple PHP variables

I am attempting to utilize an ajax request to visit a URL with two parameters. Unfortunately, my current script is not displaying any response. $(document).ready(function(){ $("#ocountClc").click(function (){ $.ajax({ type: "POST", url: "h ...

javascriptphpjqueryajax