Create webpart that uses MathJax library


I am attempting to create a webpart that will allow me to inject html into a modern page. I have that portion working. I now want to be able to use the MathJax library to insert mathematical formulas into a page. I think I have referenced the library correctly but because the user is allowed to edit the html on the fly, MathJax never does anything with the LaTeX code within the html. I will paste my code here. I am hoping that someone will have an idea of how to get this to work.


import { Version } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './HtmlWebPart.module.scss';
import * as strings from 'HtmlWebPartStrings';
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';

import * as mathjax from 'mathjax';

export interface IHtmlWebPartProps {
  description: string;
  htmlCode: string;

export default class HtmlWebPart extends BaseClientSideWebPart {

  public render(): void {
    this.domElement.innerHTML = `
        ${ }

  protected get dataVersion(): Version {
    return Version.parse('1.0');

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
          header: {
            description: "This web part allows you to enter HTML code directly into a page."
          groups: [
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyFieldCodeEditor('htmlCode', {
                  label: 'Edit HTML Code',
                  panelTitle: 'Edit HTML Code',
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  disabled: false,
                  key: 'codeEditorFieldId',
                  language: PropertyFieldCodeEditorLanguages.HTML
0 Replies