Home

Create webpart that uses MathJax library

%3CLINGO-SUB%20id%3D%22lingo-sub-815939%22%20slang%3D%22en-US%22%3ECreate%20webpart%20that%20uses%20MathJax%20library%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-815939%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20attempting%20to%20create%20a%20webpart%20that%20will%20allow%20me%20to%20inject%20html%20into%20a%20modern%20page.%20I%20have%20that%20portion%20working.%20I%20now%20want%20to%20be%20able%20to%20use%20the%20MathJax%20library%20to%20insert%20mathematical%20formulas%20into%20a%20page.%20I%20think%20I%20have%20referenced%20the%20library%20correctly%20but%20because%20the%20user%20is%20allowed%20to%20edit%20the%20html%20on%20the%20fly%2C%20MathJax%20never%20does%20anything%20with%20the%20LaTeX%20code%20within%20the%20html.%20I%20will%20paste%20my%20code%20here.%20I%20am%20hoping%20that%20someone%20will%20have%20an%20idea%20of%20how%20to%20get%20this%20to%20work.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20Version%20%7D%20from%20'%40microsoft%2Fsp-core-library'%3B%0Aimport%20%7B%0A%20%20BaseClientSideWebPart%2C%0A%20%20IPropertyPaneConfiguration%2C%0A%20%20PropertyPaneTextField%0A%7D%20from%20'%40microsoft%2Fsp-webpart-base'%3B%0Aimport%20%7B%20escape%20%7D%20from%20'%40microsoft%2Fsp-lodash-subset'%3B%0A%0Aimport%20styles%20from%20'.%2FHtmlWebPart.module.scss'%3B%0Aimport%20*%20as%20strings%20from%20'HtmlWebPartStrings'%3B%0Aimport%20%7B%20PropertyFieldCodeEditor%2C%20PropertyFieldCodeEditorLanguages%20%7D%20from%20'%40pnp%2Fspfx-property-controls%2Flib%2FPropertyFieldCodeEditor'%3B%0A%0Aimport%20*%20as%20mathjax%20from%20'mathjax'%3B%0A%0Aexport%20interface%20IHtmlWebPartProps%20%7B%0A%20%20description%3A%20string%3B%0A%20%20htmlCode%3A%20string%3B%0A%7D%0A%0Aexport%20default%20class%20HtmlWebPart%20extends%20BaseClientSideWebPart%20%7B%0A%0A%20%20%0A%20%20public%20render()%3A%20void%20%7B%0A%20%20%20%20this.domElement.innerHTML%20%3D%20%60%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%24%7B%20this.properties.htmlCode%20%7D%0A%20%20%20%20%20%20%60%3B%0A%20%20%7D%0A%0A%20%20protected%20get%20dataVersion()%3A%20Version%20%7B%0A%20%20%20%20return%20Version.parse('1.0')%3B%0A%20%20%7D%0A%0A%20%20protected%20getPropertyPaneConfiguration()%3A%20IPropertyPaneConfiguration%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20pages%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20header%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20description%3A%20%22This%20web%20part%20allows%20you%20to%20enter%20HTML%20code%20directly%20into%20a%20page.%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20groups%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupName%3A%20strings.BasicGroupName%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupFields%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PropertyFieldCodeEditor('htmlCode'%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20'Edit%20HTML%20Code'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20panelTitle%3A%20'Edit%20HTML%20Code'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20initialValue%3A%20this.properties.htmlCode%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onPropertyChange%3A%20this.onPropertyPaneFieldChanged%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20properties%3A%20this.properties%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20disabled%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3A%20'codeEditorFieldId'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20language%3A%20PropertyFieldCodeEditorLanguages.HTML%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-815939%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHTML%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Emathjax%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
smithme
Occasional Contributor

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 {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} 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 = `
      
        ${ this.properties.htmlCode }
      `;
  }

  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',
                  initialValue: this.properties.htmlCode,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  disabled: false,
                  key: 'codeEditorFieldId',
                  language: PropertyFieldCodeEditorLanguages.HTML
                })
              ]
            }
          ]
        }
      ]
    };
  }
}
Related Conversations
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
28 Replies
Early preview of Microsoft Edge group policies
Sean Lyndersay in Discussions on
65 Replies
*Updated 9/3* Syncing in Microsoft Edge Preview Channels
Elliot Kirk in Articles on
201 Replies
Tabs and Dark Mode
cjc2112 in Discussions on
2 Replies