Add custom <tex> tag?

tneotia · tneotia · commit bf980a72622f · 2021-03-08T11:34:29.000-05:00
diff --git a/README.md b/README.md
@@ -101,7 +101,7 @@ Add the following to your `pubspec.yaml` file:
 | `samp` | `section`   | `small`   | `span`| `strike`    | `strong`| `sub`   | `sup` | `summary` | `svg`| `table`| 
 | `tbody` | `td` | `template` | `tfoot`   | `th`  | `thead`     |`time`   | `tr`    | `tt`  | `u`  | `ul` |
 | `var` | `video` |  `math`:  |  `mrow`  |  `msup`    | `msub`  |  `mover`   | `munder`  | `msubsup`  | `moverunder`   | `mfrac`  | 
-| `mlongdiv` | `msqrt` |  `mroot`  |  `mi`  |  `mn`    | `mo`  |   |   |   |    |   | 
+| `mlongdiv` | `msqrt` |  `mroot`  |  `mi`  |  `mn`    | `mo`  | `tex` (custom tag for this package)  |   |   |    |   | 
 
  
 ## Currently Supported CSS Attributes:
@@ -671,6 +671,14 @@ If the parsing errors, you can use the [onMathError](#onmatherror) API to catch
 
 If you'd like to see more MathML features, feel free to create a PR or file a feature request!
 
+### Tex
+
+If you have a Tex string you'd like to render inside your HTML you can do that!
+
+Use the custom `<tex>` tag inside your HTML, and place your **raw** Tex string inside. The package uses the same logic as MathML rendering above, but doesn't need to parse the string, of course.
+ 
+ The rendering error will also be called if your Tex string fails to render.
+
 ### Table
 
 This package renders table elements using the [`flutter_layout_grid`](https://pub.dev/packages/flutter_layout_grid) plugin.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -27,7 +27,7 @@ class MyHomePage extends StatefulWidget {
   _MyHomePageState createState() => new _MyHomePageState();
 }
 
-const htmlData = """
+const htmlData = r"""
       <h1>Header 1</h1>
       <h2>Header 2</h2>
       <h3>Header 3</h3>
@@ -228,6 +228,8 @@ const htmlData = """
         <mo>=</mo>
         <mn>1</mn>
       </math>
+      <h3>Tex Support with the custom tex tag:</h3>
+      <tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>
 """;
 
 class _MyHomePageState extends State<MyHomePage> {
diff --git a/lib/src/html_elements.dart b/lib/src/html_elements.dart
@@ -87,6 +87,7 @@ const REPLACED_ELEMENTS = [
   "rt",
   "ruby",
   "math",
+  "tex",
 ];
 
 const LAYOUT_ELEMENTS = [
diff --git a/lib/src/replaced_element.dart b/lib/src/replaced_element.dart
@@ -272,12 +272,14 @@ class MathElement extends ReplacedElement {
   MathElement({
     required this.element,
     required this.texStr,
-    String name = "math",
+    String name = "[[MathElement]]",
   }) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style(display: Display.INLINE));
 
   @override
   Widget toWidget(RenderContext context) {
-    texStr = parseMathRecursive(element, r'');
+    if (element.localName == "math") {
+      texStr = parseMathRecursive(element, r'');
+    }
     return Container(
       width: MediaQuery.of(context.buildContext).size.width,
       child: Math.tex(
@@ -424,6 +426,11 @@ ReplacedElement parseReplacedElement(
         element: element,
         texStr: r'',
       );
+    case "tex":
+      return MathElement(
+        element: element,
+        texStr: element.text,
+      );
     default:
       return EmptyContentElement(name: element.localName == null ? "[[No Name]]" : element.localName!);
   }

-Original file line number
+Diff line change
   "rt",
   "ruby",
   "math",
 +  "tex",
 ];
 const LAYOUT_ELEMENTS = [