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 { 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 }) ] } ] } ] }; } }
