@brightspace-ui/core 2.108.0 → 2.110.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -58,28 +58,27 @@
58
58
 
59
59
  <d2l-demo-snippet>
60
60
  <template>
61
- <d2l-html-block>
62
- Just a text node...
63
- <h1>heading 1</h1>
64
- <h2>heading 2</h2>
65
- <h3>heading 3</h3>
66
- <h4>heading 4</h4>
67
- <h5>heading 5</h5>
68
- <h6>heading 6</h6>
69
- <div><strong>strong</strong></div>
70
- <div><b>bold</b></div>
71
- <div>text</div>
72
- <pre>preformatted</pre>
73
- <p>paragraph</p>
74
- <ul>
75
- <li>unordered item 1</li>
76
- <li>unordered item 2</li>
77
- </ul>
78
- <ol>
79
- <li>ordered item 1</li>
80
- <li>ordered item 2</li>
81
- </ol>
82
- <div><a href="https://d2l.com">anchor</a></div>
61
+ <d2l-html-block html="Just a text node...
62
+ &lt;h1&gt;heading 1&lt;/h1&gt;
63
+ &lt;h2&gt;heading 2&lt;/h2&gt;
64
+ &lt;h3&gt;heading 3&lt;/h3&gt;
65
+ &lt;h4&gt;heading 4&lt;/h4&gt;
66
+ &lt;h5&gt;heading 5&lt;/h5&gt;
67
+ &lt;h6&gt;heading 6&lt;/h6&gt;
68
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
69
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
70
+ &lt;div&gt;text&lt;/div&gt;
71
+ &lt;pre&gt;preformatted&lt;/pre&gt;
72
+ &lt;p&gt;paragraph&lt;/p&gt;
73
+ &lt;ul&gt;
74
+ &lt;li&gt;unordered item 1&lt;/li&gt;
75
+ &lt;li&gt;unordered item 2&lt;/li&gt;
76
+ &lt;/ul&gt;
77
+ &lt;ol&gt;
78
+ &lt;li&gt;ordered item 1&lt;/li&gt;
79
+ &lt;li&gt;ordered item 2&lt;/li&gt;
80
+ &lt;/ol&gt;
81
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;">
83
82
  </d2l-html-block>
84
83
  </template>
85
84
  </d2l-demo-snippet>
@@ -88,28 +87,27 @@
88
87
 
89
88
  <d2l-demo-snippet>
90
89
  <template>
91
- <d2l-html-block compact>
92
- Just a text node...
93
- <h1>heading 1</h1>
94
- <h2>heading 2</h2>
95
- <h3>heading 3</h3>
96
- <h4>heading 4</h4>
97
- <h5>heading 5</h5>
98
- <h6>heading 6</h6>
99
- <div><strong>strong</strong></div>
100
- <div><b>bold</b></div>
101
- <div>text</div>
102
- <pre>preformatted</pre>
103
- <p>paragraph</p>
104
- <ul>
105
- <li>unordered item 1</li>
106
- <li>unordered item 2</li>
107
- </ul>
108
- <ol>
109
- <li>ordered item 1</li>
110
- <li>ordered item 2</li>
111
- </ol>
112
- <div><a href="https://d2l.com">anchor</a></div>
90
+ <d2l-html-block compact html="Just a text node...
91
+ &lt;h1&gt;heading 1&lt;/h1&gt;
92
+ &lt;h2&gt;heading 2&lt;/h2&gt;
93
+ &lt;h3&gt;heading 3&lt;/h3&gt;
94
+ &lt;h4&gt;heading 4&lt;/h4&gt;
95
+ &lt;h5&gt;heading 5&lt;/h5&gt;
96
+ &lt;h6&gt;heading 6&lt;/h6&gt;
97
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
98
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
99
+ &lt;div&gt;text&lt;/div&gt;
100
+ &lt;pre&gt;preformatted&lt;/pre&gt;
101
+ &lt;p&gt;paragraph&lt;/p&gt;
102
+ &lt;ul&gt;
103
+ &lt;li&gt;unordered item 1&lt;/li&gt;
104
+ &lt;li&gt;unordered item 2&lt;/li&gt;
105
+ &lt;/ul&gt;
106
+ &lt;ol&gt;
107
+ &lt;li&gt;ordered item 1&lt;/li&gt;
108
+ &lt;li&gt;ordered item 2&lt;/li&gt;
109
+ &lt;/ol&gt;
110
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;">
113
111
  </d2l-html-block>
114
112
  </template>
115
113
  </d2l-demo-snippet>
@@ -119,9 +117,7 @@
119
117
  <d2l-demo-snippet>
120
118
  <template>
121
119
  <span>Here's an inline html-block:</span>
122
- <d2l-html-block inline>
123
- I'm inline!
124
- </d2l-html-block>
120
+ <d2l-html-block inline html="I'm inline!"></d2l-html-block>
125
121
  <span>Pretty cool!</span>
126
122
  </template>
127
123
  </d2l-demo-snippet>
@@ -142,30 +138,29 @@
142
138
 
143
139
  <d2l-demo-snippet>
144
140
  <template>
145
- <d2l-html-block>
146
- <div style="font-size: 42px;">
147
- Just a text node...
148
- <h1>heading 1</h1>
149
- <h2>heading 2</h2>
150
- <h3>heading 3</h3>
151
- <h4>heading 4</h4>
152
- <h5>heading 5</h5>
153
- <h6>heading 6</h6>
154
- <div><strong>strong</strong></div>
155
- <div><b>bold</b></div>
156
- <div>text</div>
157
- <pre>preformatted</pre>
158
- <p>paragraph</p>
159
- <ul>
160
- <li>unordered item 1</li>
161
- <li>unordered item 2</li>
162
- </ul>
163
- <ol>
164
- <li>ordered item 1</li>
165
- <li>ordered item 2</li>
166
- </ol>
167
- <div><a href="https://d2l.com">anchor</a></div>
168
- </div>
141
+ <d2l-html-block html="Just a text node...
142
+ &lt;div style=&quot;font-size: 42px;&quot;&gt;
143
+ &lt;h1&gt;heading 1&lt;/h1&gt;
144
+ &lt;h2&gt;heading 2&lt;/h2&gt;
145
+ &lt;h3&gt;heading 3&lt;/h3&gt;
146
+ &lt;h4&gt;heading 4&lt;/h4&gt;
147
+ &lt;h5&gt;heading 5&lt;/h5&gt;
148
+ &lt;h6&gt;heading 6&lt;/h6&gt;
149
+ &lt;div&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/div&gt;
150
+ &lt;div&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;
151
+ &lt;div&gt;text&lt;/div&gt;
152
+ &lt;pre&gt;preformatted&lt;/pre&gt;
153
+ &lt;p&gt;paragraph&lt;/p&gt;
154
+ &lt;ul&gt;
155
+ &lt;li&gt;unordered item 1&lt;/li&gt;
156
+ &lt;li&gt;unordered item 2&lt;/li&gt;
157
+ &lt;/ul&gt;
158
+ &lt;ol&gt;
159
+ &lt;li&gt;ordered item 1&lt;/li&gt;
160
+ &lt;li&gt;ordered item 2&lt;/li&gt;
161
+ &lt;/ol&gt;
162
+ &lt;div&gt;&lt;a href=&quot;https://d2l.com&quot;&gt;anchor&lt;/a&gt;&lt;/div&gt;
163
+ &lt;div&gt;">
169
164
  </d2l-html-block>
170
165
  </template>
171
166
  </d2l-demo-snippet>
@@ -174,120 +169,119 @@
174
169
 
175
170
  <d2l-demo-snippet>
176
171
  <template>
177
- <d2l-html-block>
178
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
179
- <mi>x</mi>
180
- <mo>=</mo>
181
- <mrow>
182
- <mfrac>
183
- <mrow>
184
- <mo>&#x2212;</mo>
185
- <mi>b</mi>
186
- <mo>&#xB1;</mo>
187
- <msqrt>
188
- <msup>
189
- <mi>b</mi>
190
- <mn>2</mn>
191
- </msup>
192
- <mo>&#x2212;</mo>
193
- <mn>4</mn>
194
- <mi>a</mi>
195
- <mi>c</mi>
196
- </msqrt>
197
- </mrow>
198
- <mrow>
199
- <mn>2</mn>
200
- <mi>a</mi>
201
- </mrow>
202
- </mfrac>
203
- </mrow>
204
- <mtext>.</mtext>
205
- <mspace linebreak="newline"></mspace>
206
- <msup>
207
- <mi>e</mi>
208
- <mrow>
209
- <mi>i</mi>
210
- <mi>π<!-- π --></mi>
211
- </mrow>
212
- </msup>
213
- <mo>+</mo>
214
- <mn>1</mn>
215
- <mo>=</mo>
216
- <mn>0</mn>
217
- </math>
218
- <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
219
- <msup>
220
- <mrow>
221
- <mo>(</mo>
222
- <mrow>
223
- <munderover>
224
- <mo>∑<!-- ∑ --></mo>
225
- <mrow class="MJX-TeXAtom-ORD">
226
- <mi>k</mi>
227
- <mo>=</mo>
228
- <mn>1</mn>
229
- </mrow>
230
- <mi>n</mi>
231
- </munderover>
232
- <msub>
233
- <mi>a</mi>
234
- <mi>k</mi>
235
- </msub>
236
- <msub>
237
- <mi>b</mi>
238
- <mi>k</mi>
239
- </msub>
240
- </mrow>
241
- <mo>)</mo>
242
- </mrow>
243
- <mrow class="MJX-TeXAtom-ORD">
244
- <mspace width="negativethinmathspace"></mspace>
245
- <mspace width="negativethinmathspace"></mspace>
246
- <mn>2</mn>
247
- </mrow>
248
- </msup>
249
- <mo>≤<!-- ≤ --></mo>
250
- <mrow>
251
- <mo>(</mo>
252
- <mrow>
253
- <munderover>
254
- <mo>∑<!-- ∑ --></mo>
255
- <mrow class="MJX-TeXAtom-ORD">
256
- <mi>k</mi>
257
- <mo>=</mo>
258
- <mn>1</mn>
259
- </mrow>
260
- <mi>n</mi>
261
- </munderover>
262
- <msubsup>
263
- <mi>a</mi>
264
- <mi>k</mi>
265
- <mn>2</mn>
266
- </msubsup>
267
- </mrow>
268
- <mo>)</mo>
269
- </mrow>
270
- <mrow>
271
- <mo>(</mo>
272
- <mrow>
273
- <munderover>
274
- <mo>∑<!-- ∑ --></mo>
275
- <mrow class="MJX-TeXAtom-ORD">
276
- <mi>k</mi>
277
- <mo>=</mo>
278
- <mn>1</mn>
279
- </mrow>
280
- <mi>n</mi>
281
- </munderover>
282
- <msubsup>
283
- <mi>b</mi>
284
- <mi>k</mi>
285
- <mn>2</mn>
286
- </msubsup>
287
- </mrow>
288
- <mo>)</mo>
289
- </mrow>
290
- </math>
172
+ <d2l-html-block html="&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;&lt;mi&gt;x&lt;/mi&gt;
173
+ &lt;mo&gt;=&lt;/mo&gt;
174
+ &lt;mrow&gt;
175
+ &lt;mfrac&gt;
176
+ &lt;mrow&gt;
177
+ &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
178
+ &lt;mi&gt;b&lt;/mi&gt;
179
+ &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
180
+ &lt;msqrt&gt;
181
+ &lt;msup&gt;
182
+ &lt;mi&gt;b&lt;/mi&gt;
183
+ &lt;mn&gt;2&lt;/mn&gt;
184
+ &lt;/msup&gt;
185
+ &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
186
+ &lt;mn&gt;4&lt;/mn&gt;
187
+ &lt;mi&gt;a&lt;/mi&gt;
188
+ &lt;mi&gt;c&lt;/mi&gt;
189
+ &lt;/msqrt&gt;
190
+ &lt;/mrow&gt;
191
+ &lt;mrow&gt;
192
+ &lt;mn&gt;2&lt;/mn&gt;
193
+ &lt;mi&gt;a&lt;/mi&gt;
194
+ &lt;/mrow&gt;
195
+ &lt;/mfrac&gt;
196
+ &lt;/mrow&gt;
197
+ &lt;mtext&gt;.&lt;/mtext&gt;
198
+ &lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
199
+ &lt;msup&gt;
200
+ &lt;mi&gt;e&lt;/mi&gt;
201
+ &lt;mrow&gt;
202
+ &lt;mi&gt;i&lt;/mi&gt;
203
+ &lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
204
+ &lt;/mrow&gt;
205
+ &lt;/msup&gt;
206
+ &lt;mo&gt;+&lt;/mo&gt;
207
+ &lt;mn&gt;1&lt;/mn&gt;
208
+ &lt;mo&gt;=&lt;/mo&gt;
209
+ &lt;mn&gt;0&lt;/mn&gt;
210
+ &lt;/math&gt;
211
+ &lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
212
+ &lt;msup&gt;
213
+ &lt;mrow&gt;
214
+ &lt;mo&gt;(&lt;/mo&gt;
215
+ &lt;mrow&gt;
216
+ &lt;munderover&gt;
217
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
218
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
219
+ &lt;mi&gt;k&lt;/mi&gt;
220
+ &lt;mo&gt;=&lt;/mo&gt;
221
+ &lt;mn&gt;1&lt;/mn&gt;
222
+ &lt;/mrow&gt;
223
+ &lt;mi&gt;n&lt;/mi&gt;
224
+ &lt;/munderover&gt;
225
+ &lt;msub&gt;
226
+ &lt;mi&gt;a&lt;/mi&gt;
227
+ &lt;mi&gt;k&lt;/mi&gt;
228
+ &lt;/msub&gt;
229
+ &lt;msub&gt;
230
+ &lt;mi&gt;b&lt;/mi&gt;
231
+ &lt;mi&gt;k&lt;/mi&gt;
232
+ &lt;/msub&gt;
233
+ &lt;/mrow&gt;
234
+ &lt;mo&gt;)&lt;/mo&gt;
235
+ &lt;/mrow&gt;
236
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
237
+ &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
238
+ &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
239
+ &lt;mn&gt;2&lt;/mn&gt;
240
+ &lt;/mrow&gt;
241
+ &lt;/msup&gt;
242
+ &lt;mo&gt;≤&lt;!-- ≤ --&gt;&lt;/mo&gt;
243
+ &lt;mrow&gt;
244
+ &lt;mo&gt;(&lt;/mo&gt;
245
+ &lt;mrow&gt;
246
+ &lt;munderover&gt;
247
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
248
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
249
+ &lt;mi&gt;k&lt;/mi&gt;
250
+ &lt;mo&gt;=&lt;/mo&gt;
251
+ &lt;mn&gt;1&lt;/mn&gt;
252
+ &lt;/mrow&gt;
253
+ &lt;mi&gt;n&lt;/mi&gt;
254
+ &lt;/munderover&gt;
255
+ &lt;msubsup&gt;
256
+ &lt;mi&gt;a&lt;/mi&gt;
257
+ &lt;mi&gt;k&lt;/mi&gt;
258
+ &lt;mn&gt;2&lt;/mn&gt;
259
+ &lt;/msubsup&gt;
260
+ &lt;/mrow&gt;
261
+ &lt;mo&gt;)&lt;/mo&gt;
262
+ &lt;/mrow&gt;
263
+ &lt;mrow&gt;
264
+ &lt;mo&gt;(&lt;/mo&gt;
265
+ &lt;mrow&gt;
266
+ &lt;munderover&gt;
267
+ &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
268
+ &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
269
+ &lt;mi&gt;k&lt;/mi&gt;
270
+ &lt;mo&gt;=&lt;/mo&gt;
271
+ &lt;mn&gt;1&lt;/mn&gt;
272
+ &lt;/mrow&gt;
273
+ &lt;mi&gt;n&lt;/mi&gt;
274
+ &lt;/munderover&gt;
275
+ &lt;msubsup&gt;
276
+ &lt;mi&gt;b&lt;/mi&gt;
277
+ &lt;mi&gt;k&lt;/mi&gt;
278
+ &lt;mn&gt;2&lt;/mn&gt;
279
+ &lt;/msubsup&gt;
280
+ &lt;/mrow&gt;
281
+ &lt;mo&gt;)&lt;/mo&gt;
282
+ &lt;/mrow&gt;
283
+ &lt;/math&gt;
284
+ &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;">
291
285
  </d2l-html-block>
292
286
  </template>
293
287
  </d2l-demo-snippet>
@@ -410,178 +404,32 @@
410
404
 
411
405
  <d2l-demo-snippet>
412
406
  <template>
413
- <d2l-html-block>
414
- An equation...
415
- <math xmlns="http://www.w3.org/1998/Math/MathML">
416
- <msqrt>
417
- <mn>3</mn>
418
- <mi>x</mi>
419
- <mo>&#x2212;</mo>
420
- <mn>1</mn>
421
- </msqrt>
422
- <mo>+</mo>
423
- <mo stretchy="false">(</mo>
424
- <mn>1</mn>
425
- <mo>+</mo>
426
- <mi>x</mi>
427
- <msup>
428
- <mo stretchy="false">)</mo>
429
- <mn>2</mn>
430
- </msup>
431
- </math> embedded inline with text... and showing placement of indicies for summations
432
- <math xmlns="http://www.w3.org/1998/Math/MathML">
433
- <msup>
434
- <mrow>
435
- <mo>(</mo>
436
- <mrow>
437
- <munderover>
438
- <mo>∑<!-- ∑ --></mo>
439
- <mrow class="MJX-TeXAtom-ORD">
440
- <mi>k</mi>
441
- <mo>=</mo>
442
- <mn>1</mn>
443
- </mrow>
444
- <mi>n</mi>
445
- </munderover>
446
- <msub>
447
- <mi>a</mi>
448
- <mi>k</mi>
449
- </msub>
450
- <msub>
451
- <mi>b</mi>
452
- <mi>k</mi>
453
- </msub>
454
- </mrow>
455
- <mo>)</mo>
456
- </mrow>
457
- <mrow class="MJX-TeXAtom-ORD">
458
- <mspace width="negativethinmathspace"></mspace>
459
- <mspace width="negativethinmathspace"></mspace>
460
- <mn>2</mn>
461
- </mrow>
462
- </msup>
463
- <mo>≤<!-- ≤ --></mo>
464
- <mrow>
465
- <mo>(</mo>
466
- <mrow>
467
- <munderover>
468
- <mo>∑<!-- ∑ --></mo>
469
- <mrow class="MJX-TeXAtom-ORD">
470
- <mi>k</mi>
471
- <mo>=</mo>
472
- <mn>1</mn>
473
- </mrow>
474
- <mi>n</mi>
475
- </munderover>
476
- <msubsup>
477
- <mi>a</mi>
478
- <mi>k</mi>
479
- <mn>2</mn>
480
- </msubsup>
481
- </mrow>
482
- <mo>)</mo>
483
- </mrow>
484
- <mrow>
485
- <mo>(</mo>
486
- <mrow>
487
- <munderover>
488
- <mo>∑<!-- ∑ --></mo>
489
- <mrow class="MJX-TeXAtom-ORD">
490
- <mi>k</mi>
491
- <mo>=</mo>
492
- <mn>1</mn>
493
- </mrow>
494
- <mi>n</mi>
495
- </munderover>
496
- <msubsup>
497
- <mi>b</mi>
498
- <mi>k</mi>
499
- <mn>2</mn>
500
- </msubsup>
501
- </mrow>
502
- <mo>)</mo>
503
- </mrow>
504
- </math> and other symbols.
505
- </d2l-html-block>
506
- </template>
507
- </d2l-demo-snippet>
508
-
509
- <h2>HTML Block (LaTeX math)</h2>
510
-
511
- <d2l-demo-snippet>
512
- <template>
513
- <d2l-html-block>
514
- <div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
515
- <div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>
516
- </d2l-html-block>
517
- </template>
518
- </d2l-demo-snippet>
519
-
520
- <h2>HTML Block (LaTeX inline math)</h2>
521
-
522
- <d2l-demo-snippet>
523
- <template>
524
- <d2l-html-block>
525
- <div>
526
- An equation rendered using LaTeX...
527
- \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
528
- ... and some text ...
529
- </div>
530
- </d2l-html-block>
531
- </template>
532
- </d2l-demo-snippet>
533
-
534
- <h2>HTML Block (html prop)</h2>
535
-
536
- <d2l-demo-snippet>
537
- <template>
538
- <d2l-html-block html="&lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;&lt;mi&gt;x&lt;/mi&gt;
539
- &lt;mo&gt;=&lt;/mo&gt;
540
- &lt;mrow&gt;
541
- &lt;mfrac&gt;
542
- &lt;mrow&gt;
543
- &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
544
- &lt;mi&gt;b&lt;/mi&gt;
545
- &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
546
- &lt;msqrt&gt;
547
- &lt;msup&gt;
548
- &lt;mi&gt;b&lt;/mi&gt;
549
- &lt;mn&gt;2&lt;/mn&gt;
550
- &lt;/msup&gt;
551
- &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
552
- &lt;mn&gt;4&lt;/mn&gt;
553
- &lt;mi&gt;a&lt;/mi&gt;
554
- &lt;mi&gt;c&lt;/mi&gt;
555
- &lt;/msqrt&gt;
556
- &lt;/mrow&gt;
557
- &lt;mrow&gt;
558
- &lt;mn&gt;2&lt;/mn&gt;
559
- &lt;mi&gt;a&lt;/mi&gt;
560
- &lt;/mrow&gt;
561
- &lt;/mfrac&gt;
562
- &lt;/mrow&gt;
563
- &lt;mtext&gt;.&lt;/mtext&gt;
564
- &lt;mspace linebreak=&#34;newline&#34;&gt;&lt;/mspace&gt;
565
- &lt;msup&gt;
566
- &lt;mi&gt;e&lt;/mi&gt;
567
- &lt;mrow&gt;
568
- &lt;mi&gt;i&lt;/mi&gt;
569
- &lt;mi&gt;π&lt;!-- π --&gt;&lt;/mi&gt;
570
- &lt;/mrow&gt;
571
- &lt;/msup&gt;
572
- &lt;mo&gt;+&lt;/mo&gt;
573
- &lt;mn&gt;1&lt;/mn&gt;
574
- &lt;mo&gt;=&lt;/mo&gt;
575
- &lt;mn&gt;0&lt;/mn&gt;
576
- &lt;/math&gt;
577
- &lt;math xmlns=&#34;http://www.w3.org/1998/Math/MathML&#34; display=&#34;block&#34;&gt;
407
+ <d2l-html-block html="An equation...
408
+ &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
409
+ &lt;msqrt&gt;
410
+ &lt;mn&gt;3&lt;/mn&gt;
411
+ &lt;mi&gt;x&lt;/mi&gt;
412
+ &lt;mo&gt;&#x2212;&lt;/mo&gt;
413
+ &lt;mn&gt;1&lt;/mn&gt;
414
+ &lt;/msqrt&gt;
415
+ &lt;mo&gt;+&lt;/mo&gt;
416
+ &lt;mo stretchy=&quot;false&quot;&gt;(&lt;/mo&gt;
417
+ &lt;mn&gt;1&lt;/mn&gt;
418
+ &lt;mo&gt;+&lt;/mo&gt;
419
+ &lt;mi&gt;x&lt;/mi&gt;
420
+ &lt;msup&gt;
421
+ &lt;mo stretchy=&quot;false&quot;&gt;)&lt;/mo&gt;
422
+ &lt;mn&gt;2&lt;/mn&gt;
423
+ &lt;/msup&gt;
424
+ &lt;/math&gt; embedded inline with text... and showing placement of indicies for summations
425
+ &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
578
426
  &lt;msup&gt;
579
427
  &lt;mrow&gt;
580
428
  &lt;mo&gt;(&lt;/mo&gt;
581
429
  &lt;mrow&gt;
582
430
  &lt;munderover&gt;
583
431
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
584
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
432
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
585
433
  &lt;mi&gt;k&lt;/mi&gt;
586
434
  &lt;mo&gt;=&lt;/mo&gt;
587
435
  &lt;mn&gt;1&lt;/mn&gt;
@@ -599,9 +447,9 @@
599
447
  &lt;/mrow&gt;
600
448
  &lt;mo&gt;)&lt;/mo&gt;
601
449
  &lt;/mrow&gt;
602
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
603
- &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
604
- &lt;mspace width=&#34;negativethinmathspace&#34;&gt;&lt;/mspace&gt;
450
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
451
+ &lt;mspace width=&quot;negativethinmathspace&quot;&gt;&lt;/mspace&gt;
452
+ &lt;mspace width=&quot;negativethinmathspace&quot;&gt;&lt;/mspace&gt;
605
453
  &lt;mn&gt;2&lt;/mn&gt;
606
454
  &lt;/mrow&gt;
607
455
  &lt;/msup&gt;
@@ -611,7 +459,7 @@
611
459
  &lt;mrow&gt;
612
460
  &lt;munderover&gt;
613
461
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
614
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
462
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
615
463
  &lt;mi&gt;k&lt;/mi&gt;
616
464
  &lt;mo&gt;=&lt;/mo&gt;
617
465
  &lt;mn&gt;1&lt;/mn&gt;
@@ -631,7 +479,7 @@
631
479
  &lt;mrow&gt;
632
480
  &lt;munderover&gt;
633
481
  &lt;mo&gt;∑&lt;!-- ∑ --&gt;&lt;/mo&gt;
634
- &lt;mrow class=&#34;MJX-TeXAtom-ORD&#34;&gt;
482
+ &lt;mrow class=&quot;MJX-TeXAtom-ORD&quot;&gt;
635
483
  &lt;mi&gt;k&lt;/mi&gt;
636
484
  &lt;mo&gt;=&lt;/mo&gt;
637
485
  &lt;mn&gt;1&lt;/mn&gt;
@@ -646,9 +494,39 @@
646
494
  &lt;/mrow&gt;
647
495
  &lt;mo&gt;)&lt;/mo&gt;
648
496
  &lt;/mrow&gt;
649
- &lt;/math&gt;
650
- &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;
651
- &lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
497
+ &lt;/math&gt; and other symbols.">
498
+ </d2l-html-block>
499
+ </template>
500
+ </d2l-demo-snippet>
501
+
502
+ <h2>HTML Block (LaTeX math)</h2>
503
+
504
+ <d2l-demo-snippet>
505
+ <template>
506
+ <d2l-html-block html="&lt;div&gt;$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$&lt;/div&gt;
507
+ &lt;div&gt;$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$&lt;/div&gt;">
508
+ </d2l-html-block>
509
+ </template>
510
+ </d2l-demo-snippet>
511
+
512
+ <h2>HTML Block (LaTeX inline math)</h2>
513
+
514
+ <d2l-demo-snippet>
515
+ <template>
516
+ <d2l-html-block html="&lt;div&gt;
517
+ An equation rendered using LaTeX...
518
+ \( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
519
+ ... and some text ...
520
+ &lt;/div&gt;">
521
+ </d2l-html-block>
522
+ </template>
523
+ </d2l-demo-snippet>
524
+
525
+ <h2>HTML Block (code)</h2>
526
+
527
+ <d2l-demo-snippet>
528
+ <template>
529
+ <d2l-html-block html="&lt;pre class=&#34;d2l-code d2l-code-dark&#34;&gt;&lt;code class=&#34;language-javascript&#34;&gt;function helloGrumpy(name) {
652
530
  console.log(`Hi there ${name}.`);
653
531
  }
654
532
  helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
@@ -665,7 +543,6 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
665
543
  </d2l-demo-snippet>
666
544
 
667
545
  <d2l-code-view language="javascript">
668
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
669
546
  import { html, LitElement } from 'lit';
670
547
 
671
548
  class SomeComponent extends LitElement {
@@ -687,7 +564,6 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
687
564
 
688
565
  <script type="module">
689
566
  import { html, LitElement } from 'lit';
690
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
691
567
 
692
568
  class SomeComponent extends LitElement {
693
569
 
@@ -806,9 +682,7 @@ helloGrumpy('Wizard');&lt;/code&gt;&lt;/pre&gt;">
806
682
 
807
683
  render() {
808
684
  return html`
809
- <d2l-html-block>
810
- ${unsafeHTML(this._htmlSnippets[this._updateCount])}
811
- </d2l-html-block>
685
+ <d2l-html-block html="${this._htmlSnippets[this._updateCount]}"></d2l-html-block>
812
686
  <button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
813
687
  }
814
688