/
index.html
917 lines (799 loc) · 47.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
<!DOCTYPE html>
<meta charset="utf8">
<title>Ecmarkup</title>
<pre class="metadata">
repository: https://github.com/tc39/ecmarkup
copyright: false
markEffects: true
</pre>
<style>
.result {
padding-left: 0.5em;
border-left: 5px solid #dadada;
}
</style>
<emu-biblio href="./biblio.json"></emu-biblio>
<emu-intro id="intro">
<h1>Ecmarkup</h1>
<p><a href="https://github.com/tc39/ecmarkup">Ecmarkup</a> is a number of custom elements and a toolchain suitable for specifying semantics for ECMAScript and other programming languages.</p>
<p>Ecmarkup offers the following conveniences (among many others):</p>
<ul>
<li><a href="https://github.com/tc39/ecmarkdown">Ecmarkdown</a> syntax for paragraphs and algorithms</li>
<li><a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a> for specifying grammar</li>
<li>Terse markup for the authoring conventions used in ECMAScript specifications including clauses, notes, examples, figures, tables, and more.</li>
<li>Easy cross-references by element ID to clauses, abstract operations, examples, figures, tables, and etc. in the current document, ES6, and other specs.</li>
<li>Generates table of contents</li>
<li>Generates clause ids based on document position</li>
<li>Auto-links abstract operations and terms based on name with support for external bibliographies for cross-referencing between specs</li>
<li>Source code syntax highlighting inside pre code blocks</li>
</ul>
<p>This document is itself written using Ecmarkup. Its source can be viewed <a href="https://github.com/tc39/ecmarkup/blob/HEAD/spec/index.html">on github</a>.</p>
</emu-intro>
<emu-clause id="getting-started">
<h1>Getting Started</h1>
<pre><code class="language-shell">
$ npm install -g ecmarkup
$ ecmarkup --help
$ ecmarkup spec.html out.html
</code></pre>
</emu-clause>
<emu-clause id="useful-options">
<h1>Options</h1>
<p>Build options and document options can be passed in via the command line or specified in the <emu-xref href="#metadata">front-matter</emu-xref> of your document. There is no bright line separating the two categories, but for purposes of organization, document options are defined as those affecting the observable rendered output content.</p>
<emu-table id="build-options" class="code">
<emu-caption>Build options</emu-caption>
<table>
<tr><th>Command Line Option</th><th>Front-Matter Key</th><th>Description</th></tr>
<tr><td>`--watch`</td><td></td><td>Rebuild when files change.</td></tr>
<tr><td>`--verbose`</td><td></td><td>Print verbose logging info.</td></tr>
<tr><td>`--write-biblio`</td><td></td><td>Emit a biblio file to the specified path.</td></tr>
<tr><td>`--assets`</td><td>`assets`</td><td>"none" for no CSS/JS/etc, "inline" for inline CSS/JS/etc, "external" for external CSS/JS/etc.</td></tr>
<tr><td>`--assets-dir`</td><td>`assetsDir`</td><td>Directory in which to place assets when using `--assets=external`.</td></tr>
<tr><td>`--lint-spec`</td><td>`lintSpec`</td><td>Enforce some style and correctness checks.</td></tr>
<tr><td>`--error-formatter`</td><td></td><td>The <a href="https://eslint.org/docs/user-guide/formatters/">eslint formatter</a> to be used for printing warnings and errors when using `--verbose`. Either the name of a built-in eslint formatter or the package name of an installed eslint compatible formatter.</td></tr>
<tr><td>`--strict`</td><td></td><td>Exit with an error if there are warnings. Cannot be used with `--watch`.</td></tr>
<tr><td>`--multipage`</td><td></td><td>Emit a distinct page for each top-level clause.</td></tr>
</table>
</emu-table>
<emu-table id="document-options" class="code">
<emu-caption>Document options</emu-caption>
<table>
<tr><th>Command Line Option</th><th>Front-Matter Key</th><th>Description</th></tr>
<tr><td></td><td>`title`</td><td>Document title, for example "ECMAScript 2016" or "Async Functions".</td></tr>
<tr><td></td><td>`status`</td><td>Document status. Can be "proposal", "draft", or "standard". Defaults to "proposal".</td></tr>
<tr><td></td><td>`stage`</td><td><a href="https://tc39.es/process-document/">TC39 proposal stage</a>. If present and `status` is "proposal", `version` defaults to "Stage <var>stage</var> Draft".</td></tr>
<tr><td></td><td>`version`</td><td>Document version, for example "6<sup>th</sup> Edition" (which renders like "6<sup>th</sup> Edition") or "Draft 1".</td></tr>
<tr><td></td><td>`date`</td><td>Timestamp of document rendering, used for various pieces of boilerplate. Defaults to the value of <a href="https://reproducible-builds.org/docs/source-date-epoch/">the `SOURCE_DATE_EPOCH` environment variable</a> (as a number of second since the POSIX epoch) if it exists, otherwise to the current date and time.</td></tr>
<tr><td></td><td>`shortname`</td><td>Document shortname, for example "ECMA-262". If present and `status` is "draft", `version` defaults to "Draft <var>shortname</var>".</td></tr>
<tr><td></td><td>`location`</td><td>URL of this document. Used in conjunction with the biblio file to support inbound references from other documents.</td></tr>
<tr><td></td><td>`copyright`</td><td>Emit copyright and software license information. Boolean, default true.</td></tr>
<tr><td></td><td>`contributors`</td><td>Contributors to this specification, i.e. those who own the copyright. If your proposal includes text from any Ecma specification, this should include "Ecma International".</td></tr>
<tr><td>`--no-toc`</td><td>`toc`</td><td>Emit table of contents. Boolean, default true.</td></tr>
<tr><td>`--old-toc`</td><td>`oldToc`</td><td>Emit the table of contents at the top of the document rather than as a side pane. Boolean, default false.</td></tr>
<tr><td>`--load-biblio`</td><td>`extraBiblios`</td><td>Extra biblio.json file(s) to load. This should contain either an object as exported by `--write-biblio` or an array of such objects.</td></tr>
<tr><td></td><td>`boilerplate`</td><td>An object with `address` and/or `copyright` and/or `license` fields containing paths to files containing the corresponding content for populating an element with class "copyright-and-software-license" (or if not found, an appended <emu-xref href="#emu-annex" title></emu-xref> with that id) when `copyright` is true. Absent fields are assumed to reference files in a "boilerplate" directory sibling of the directory containing the ecmarkup executable.</td></tr>
<tr><td>`--mark-effects`</td><td>`markEffects`</td><td>Propagate and render <a href="#effects">effects</a> like "user code".</td></tr>
</table>
</emu-table>
</emu-clause>
<emu-clause id="stylesheets-and-scripts">
<h1>Stylesheets and Scripts</h1>
<p>Ecmarkup requires CSS styles and, if you're using the sidebar table of contents, javascript as well. By default CSS and JS dependencies are inlined into the document. You can override this by setting assets to "none" (for example if you want to manually link to external assets). Passing cssOut and jsOut will write the respective files to disk at the given path.</p>
</emu-clause>
<emu-clause id="editorial-conventions">
<h1>Editorial Conventions</h1>
<p>There are a large number of features in Ecmarkup. Detailed documentation can be found in later sections. This section provides a high-level overview of what capabilities are available and when to use them.</p>
<emu-table>
<emu-caption>Structuring your Ecmarkup document</emu-caption>
<table>
<tr><th>Notational Convention</th><th>Ecmarkup Functionality</th></tr>
<tr><td>Clauses</td><td><emu-xref href="#emu-clause" title></emu-xref>, <emu-xref href="#emu-intro" title></emu-xref>, and <emu-xref href="#emu-annex" title></emu-xref></td></tr>
<tr><td>Algorithms</td><td><emu-xref href="#emu-alg" title></emu-xref> with Ecmarkdown (see also <emu-xref href="#emd-overview"></emu-xref>)</td></tr>
<tr><td>Mathematical expressions</td><td><emu-xref href="#emu-eqn" title></emu-xref></td></tr>
<tr><td>Notes</td><td><emu-xref href="#emu-note" title></emu-xref></td></tr>
<tr><td>Figures (such as images)</td><td><emu-xref href="#emu-figure" title></emu-xref></td></tr>
<tr><td>Tables</td><td><emu-xref href="#emu-table" title></emu-xref></td></tr>
<tr><td>Examples</td><td><emu-xref href="#emu-example" title></emu-xref></td></tr>
<tr><td>Grammar</td><td><emu-xref href="#emu-grammar" title></emu-xref> using <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown syntax</a> or <emu-xref href="#emu-production" title></emu-xref> and child elements</td></tr>
<tr><td>Cross-references</td><td><emu-xref href="#emu-xref" title></emu-xref> (can reference clauses, productions, abstract operations, tables, figuers, and examples)</td></tr>
</table>
</emu-table>
<p>There are also a number of elements and corresponding Ecmarkdown syntax to give inline styles to various parts of your document in accordance with ECMAScript conventions. More detail on Ecmarkdown syntax can be found <a href="https://github.com/tc39/ecmarkdown">on its readme</a>.</p>
<emu-table id="emd-overview">
<emu-caption>Inline styles/conventions</emu-caption>
<table>
<tr>
<th>Notational Convention</th>
<th>Ecmarkdown Syntax</th>
<th>Ecmarkup Functionality</th>
</tr>
<tr>
<td>Variables, such as those in defined in algorithms, parameters in abstract operations, etc.</td>
<td>`_variable_`</td>
<td>`<var>variable</var>`</td>
</tr>
<tr>
<td>ECMAScript Language Type Values, eg. *undefined*, *true*, *1*<sub>𝔽</sub>, *"string"*, *TypeError*, etc.</td>
<td>`*TypeError*`</td>
<td>`<emu-val>TypeError</emu-val>`</td>
</tr>
<tr>
<td>Specification types and their instances, eg. ~throw~ and ~empty~.</td>
<td>`~throw~`</td>
<td>`<emu-const>throw<emu-const>`</td>
</tr>
<tr>
<td>Source Code, eg. `Function.prototype`.</td>
<td>`\`code\``</td>
<td>`<code>code</code>`</td>
</tr>
<tr>
<td>Non-terminal references, eg. as |FunctionDeclaration| and |FunctionExpression|.</td>
<td>`|FunctionExpression|`</td>
<td>`<emu-nt>FunctionExpression</emu-nt>`</td>
</tr>
</table>
</emu-table>
</emu-clause>
<emu-clause id="metadata">
<h1>Metadata</h1>
<p>There are a number of settings that allow customizations or enable generation of boilerplate. To add metadata to your document, use yaml syntax inside a `<pre class="metadata">` element somewhere in the root of your document. See <emu-xref href="#build-options"></emu-xref> and <emu-xref href="#document-options"></emu-xref> for a list (or consult `--help`).</p>
<p>Some metadata can also be passed on the command line, for example `--no-toc`. Such options take precedence over embedded metadata.</p>
<h2>Example</h2>
<pre><code class="language-html">
<pre class="metadata">
title: Document 1
toc: false
</pre>
</code></pre>
</emu-clause>
<emu-clause id="clauses">
<h1>Clauses</h1>
<p>Clauses are referenced using their id and are numbered automatically based on document position. Ecmarkdown syntax can be used in descendent text nodes as well. Text nodes are parsed as Ecmarkdown Fragments.</p>
<emu-clause id="emu-intro">
<h1>emu-intro</h1>
<p>Non-normative introductory information.</p>
<h2>Attributes</h2>
<p><b>id:</b> Clause id. Must be unique.</p>
<p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause.</p>
</emu-clause>
<emu-clause id="emu-clause">
<h1>emu-clause</h1>
<p>Normative clause.</p>
<h2>Attributes</h2>
<p><b>id:</b> Clause id. Must be unique.</p>
<p><b>example:</b> If present, the clause is an example.</p>
<p><b>legacy:</b> If present, the clause is Legacy.</p>
<p><b>normative-optional:</b> If present, the clause is Normative Optional.</p>
<p><b>number:</b> Optional: An explicit clause number, overriding the default auto-incrementing number. Can be a nested number, as in `number="2.1"`.</p>
<p><b>type:</b> Optional: Type of feature described by the clause.</p>
<ul>
<li>"abstract operation"</li>
<li>"concrete method"</li>
<li>"host-defined abstract operation"</li>
<li>"implementation-defined abstract operation"</li>
<li>"internal method"</li>
<li>"numeric method"</li>
<li>"sdo" or "syntax-directed operation"</li>
</ul>
<emu-clause id="emu-clause-legacy-attributes" legacy>
<h1>Legacy Attributes</h1>
<p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause. When a structured header is present the aoid will be inferred, but this attribute may be set explicitly when not using a structured header.</p>
</emu-clause>
<emu-clause id="emu-clause-structured-headers">
<h1>Structured Headers</h1>
<p>A clause describing an operation or method may have a <dfn>structured header</dfn> to document its signature and metadata. Such a structure consists of:</p>
<ol>
<li>an <code><h1></code> element containing the name of the operation followed by a parenthesized list of parameters, each appearing on a comma-terminated line of its own and consisting of a name and value constraints separated by a colon and optionally preceded with "optional"</li>
<li>
a <code><dl></code> element with class "header" and a collection of optional key-value pairs expressed using <code><dt></code> and <code><dd></code> elements:
<ul>
<li><b>description:</b> An explanation of the operation's behaviour.</li>
<li><b>effects:</b> A list of "effects" associated with the clause (and transitively with those referencing it), separated by commas with optional whitespace. The only currently-known effect is "user-code", which indicates that the operation or method can evaluate non-implementation code (such as custom getters).</li>
<li><b>for:</b> The type of value to which a clause of type "concrete method" or "internal method" applies.</li>
<li><b>redefinition:</b> If "true", the name of the operation will not automatically link (i.e., it will not automatically be given an aoid).</li>
<li><b>skip global checks:</b> If "true", disables consistency checks for this AO which require knowing every callsite.</li>
</ul>
</li>
</ol>
</emu-clause>
<h2>Example</h2>
<pre><code class="language-html">
<emu-clause id="example-normative-optional" type="abstract operation" normative-optional example>
<h1>
ExampleOperation (
_S_: a String,
optional _length_: a non-negative integer,
)
</h1>
<dl class="header">
<dt>description</dt>
<dd>It returns a List of the code points of the first _length_ grapheme clusters of _S_ using the host environment's current locale, or all code points when _length_ is not present.</dd>
</dl>
<p>This clause is normative optional.</p>
</emu-clause>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-clause id="example-normative-optional" type="abstract operation" normative-optional example>
<h1>
ExampleOperation (
_S_: a String,
optional _length_: a non-negative integer,
)
</h1>
<dl class="header">
<dt>description</dt>
<dd>It returns a List of the code points of the first _length_ grapheme clusters of _S_ using the host environment's current locale, or all code points when _length_ is not present.</dd>
</dl>
<p>This clause is normative optional.</p>
</emu-clause>
</aside>
</emu-clause>
<emu-clause id="emu-annex">
<h1>emu-annex</h1>
<p>Annex clause.</p>
<h2>Attributes</h2>
<p><b>normative:</b> If present, annex is normative. Default is non-normative.</p>
<p><b>id:</b> Clause id. Must be unique.</p>
<p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause.</p>
</emu-clause>
</emu-clause>
<emu-clause id="definitions">
<h1>Definitions</h1>
<p>Terms can be defined using the `<dfn>` element. Any uses of that term will be automatically linked to the clause containing the definition, or, if the `<dfn>` element has an `id`, to the `<dfn>` itself. This can be suppressed with the <a href="#emu-not-ref">`emu-not-ref`</a> element.</p>
<p>When the term starts with a lowercase English letter, usages of the term with the first letter capitalized will also link.</p>
<h2>Attributes</h2>
<p><b>variants:</b> If present, specifies other variants of the term (such as plural forms). Multiple variants are separated by commas with optional whitespace.</p>
<h2>Example</h2>
<pre><code class="language-html">
<p>A <dfn id="swordfish" variants="swordfishes,broadbill,broadbills,Xiphias gladius">swordfish</dfn> is a large fish characterized by a long, pointed bill.</p>
<p>The Latin name for swordfishes, <em>Xiphias gladius</em>, comes from the Greek word "ξίφος" (xiphos, "sword") and from the Latin word "gladius" ("sword").</p>
</code></pre>
<h3>Result</h3>
<aside class="result">
<p>A <dfn id="swordfish" variants="swordfishes,Xiphias gladius">swordfish</dfn> is large fish characterized by a long, pointed bill.</p>
<p>The Latin name for swordfishes, <em>Xiphias gladius</em>, comes from the Greek word "ξίφος" (xiphos, "sword") and from the Latin word "gladius" ("sword").</p>
</aside>
</emu-clause>
<emu-clause id="effects">
<h1>Effects</h1>
<p>Abstract operations can be marked as having effects that propagate to their invocation sites. Subject to the following rules, calls to such operations are given a class of the effect name prefixed with “e-”. When using `markEffects`, the CSS includes styling for the "user-code" effect via class name `e-user-code` that is off by default but can be togged by pressing <kbd>u</kbd>.</p>
<p>Within an algorithm, an `emu-meta` element enclosing an operation invocation can be used to indicate either the origination of effects or the absence of effects using a list of effect names separated by commas with optional whitespace in an <b>effects</b> or <b>suppress-effects</b> attribute (respectively).</p>
<pre><code class="language-html">
1. Let _value_ be ? <emu-meta effects="user-code">_O_.[[Get]]</emu-meta>(_P_, _O_).
1. Let _primValue_ be ? ToPrimitive(_value_, ~number~).
1. Let _stringValue_ be ? <emu-meta suppress-effects="user-code">ToString(_primValue_)</emu-meta>.
</code></pre>
<p>Effects do not normally propagate to callsites marked as infallibly non-abrupt with <code>!</code>. Such sites must be manually marked with `emu-meta`.</p>
<p>When a step or its substeps have effects but those effects should not imply that the containing algorithm has the same effects, propagation may be prevented using a `[fence-effects="user-code"]` annotation at the begining of the step. This implicitly applies to steps which define abstract closures.</p>
<p>It is also possible to associate effects at the level of an entire operation (for example, because it is not defined with algorithm steps) by adding to its <a href="#emu-clause-structured-headers">structured header</a> an <b>effects</b> entry.</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-clause id="sec-effect" type="abstract operation">
<h1>Effect ()</h1>
<dl class="header"></dl>
<emu-alg>
1. <emu-meta effects="user-code">Call user code.</emu-meta>
</emu-alg>
</emu-clause>
<emu-clause id="sec-transitive-effect" type="abstract operation">
<h1>TransitiveEffect ()</h1>
<dl class="header"></dl>
<emu-alg>
1. Perform Effect().
</emu-alg>
</emu-clause>
</code></pre>
<h3>Result</h3>
<em>Press <kbd>u</kbd> to toggle annotation visibility.</em>
<aside class="result">
<emu-clause id="sec-effect" type="abstract operation">
<h1>Effect ( )</h1>
<dl class="header"></dl>
<emu-alg>
1. <emu-meta effects="user-code">Call user code.</emu-meta>
</emu-alg>
</emu-clause>
<emu-clause id="sec-transitive-effect" type="abstract operation">
<h1>TransitiveEffect ( )</h1>
<dl class="header"></dl>
<emu-alg>
1. Perform Effect().
</emu-alg>
</emu-clause>
</aside>
</emu-clause>
<emu-clause id="emu-alg">
<h1>emu-alg</h1>
<p>Algorithm steps. Should not contain any HTML. The node's textContent is parsed as an Ecmarkdown document. Additionally, calls to abstract operations inside algorithm steps are automatically linked to their definitions by first checking for any clauses or algorithms with the appropriate <b>aoid</b> in the current spec, and afterwards checking any linked <a href="#emu-biblio">bibliography files</a>.</p>
<p>Algorithm steps can be annotated with additional metadata as summarized in <emu-xref href="#algorithm-step-annotation"></emu-xref>.</p>
<h2>Attributes</h2>
<p><b>example:</b> If present, the element is an example.</p>
<p><b>replaces-step:</b> If present, references a step to replace by its <emu-xref href="#labeled-steps"><b>id</b></emu-xref> (whose numbering the algorithm adopts).</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-alg>
1. Let _length_ be 0.
1. Let _node_ be this |ListNode|.
1. Repeat, while _node_ is not *undefined*,
1. Set _node_ to NextNode of _node_.
1. [id="step-example-label"] Set _length_ to _length_ + 1.
1. Return _length_.
</emu-alg>
<p>The following is an alernative definition of step <emu-xref href="#step-example-label"></emu-xref>.</p>
<emu-alg replaces-step="step-example-label">
1. Set _length_ to _length_ + 1.
1. Let _weight_ be GetWeight of _node_.
1. If _length_ = 10<sup>9</sup> or _weight_ > 2<sup>_length_ + 1</sup>, then
1. Throw a *RangeError* exception.
</emu-alg>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-alg>
1. Let _length_ be 0.
1. Let _node_ be this |ListNode|.
1. Repeat, while _node_ is not *undefined*,
1. Set _node_ to NextNode of _node_.
1. [id="step-example-label"] Set _length_ to _length_ + 1.
1. Return _length_.
</emu-alg>
<p>The following is an alernative definition of step <emu-xref href="#step-example-label"></emu-xref>.</p>
<emu-alg replaces-step="step-example-label">
1. Set _length_ to _length_ + 1.
1. Let _weight_ be GetWeight of _node_.
1. If _length_ = 10<sup>9</sup> or _weight_ > 2<sup>_length_ + 1</sup>, then
1. Throw a *RangeError* exception.
</emu-alg>
</aside>
<emu-table id="algorithm-step-annotation">
<emu-caption>Algorithm Step Annotation</emu-caption>
<table>
<tr><th>Data</th><th>Description</th><th>Example Syntax</th></tr>
<tr>
<td><emu-xref href="#labeled-steps">Step labels</emu-xref></td>
<td>Provide an id for referencing an individual step.</td>
<td>`[id="step-label"]`</td>
</tr>
<tr>
<td><emu-xref href="#variable-declarations" title></emu-xref></td>
<td>Inform the linter of the existence of a variable.</td>
<td>`[declared="x"]`</td>
</tr>
<tr>
<td><emu-xref href="#effects">Effect propagation control</emu-xref></td>
<td>Originate, suppress, or constrain the scope of effects.</td>
<td>`<emu-meta>`, `[fence-effects="user-code"]`</td>
</tr>
<tr>
<td>Step optionality</td>
<td>Mark a step as deprecated, normative-optional, or legacy.</td>
<td>`[normative-optional]`</td>
</tr>
</table>
</emu-table>
<emu-clause id="labeled-steps">
<h1>Step Labels</h1>
<p>Each step can be given an id for reference by <emu-xref href="#emu-xref" title></emu-xref> or <b>replaces-step</b>.</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-alg>
1. [id="step-example-internal"] Let _obj_ be OrdinaryObjectCreate(*null*).
</emu-alg>
</code></pre>
</emu-clause>
<emu-clause id="variable-declarations">
<h1>Variable Declarations</h1>
<p>The linter checks that each used variable in an algorithm step is declared earlier. It recognizes most common forms of declaration automatically, but in case there is a declaration which is not automatically inferred, a variable can be marked as declared for the purposes of this analysis by adding a `[declared="v"]` attribute at the start of the step. Multiple variables can be separated by commas with optional whitespace.</p>
<p>Note that the `[declared="v"]` attribute must be at the beginning of the step, including before any `<ins>` tags.</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-alg>
1. [declared="x"] Suppose the existence of _x_.
</emu-alg>
</code></pre>
</emu-clause>
</emu-clause>
<emu-clause id="emu-eqn">
<h1>emu-eqn</h1>
<p>An equation, similar to those found in ES6 <a href="https://tc39.es/ecma262/#sec-year-number">Year Number</a>.</p>
<h2>Attributes</h2>
<p><b>aoid:</b> If present, an abstract operation id defined by this equation.</p>
<p><b>id:</b> If present, links will go directly to the eqn definition. Otherwise, links go to the parent clause.</p>
</emu-clause>
<emu-clause id="emu-note">
<h1>emu-note</h1>
<p>Non-normative explanatory text. Comes in two types - regular notes and Editor's notes. Regular notes are intended for the implementers and end users of this specification. Editor's notes are notes to and from the Editors and will generally be removed prior to a specification being finalized and ratified.</p>
<h2>Attributes</h2>
<p><b>type:</b> The type of note, either blank or "editor".</p>
<h2>Example</h2>
<pre><code class="language-html">
<p>For authentication only, servers and clients MUST support SASL Salted Challenge Response Authentication Mechanism [SCRAM].</p>
<emu-note>But we know you won't.</emu-note>
<emu-note type="editor">This joke brought to you by RFC6919.</emu-note>
</code></pre>
<h3>Result</h3>
<aside class="result">
<p>For authentication only, servers and clients MUST support SASL Salted Challenge Response Authentication Mechanism [SCRAM].</p>
<emu-note>But we know you won't.</emu-note>
<emu-note type="editor">This joke brought to you by RFC6919.</emu-note>
</aside>
</emu-clause>
<emu-clause id="emu-xref">
<h1>emu-xref</h1>
<p>Cross-reference another clause, production, note, example, abstract operation, or labeled step. If the text content of this element is empty, a suitable default is used. The `title` attribute controls this default - when present, clauses are referred to using their title rather than number. This also applies to examples which are indexed first by their containing clause and then their example number.</p>
<p>Cross-references to an id check for clauses, productions, examples, and steps in this order. For each type, the local document is consulted before looking for external sources.</p>
<h2>Attributes</h2>
<p><b>href:</b> Optional: URL of the target clause, production, or example to cross-reference, interpreted relative to the containing document.</p>
<p><b>title:</b> Optional: If present, xref will be filled in with the referenced clause's title. Otherwise, the clause's section number is used.</p>
<p><b>aoid:</b> Optional: aoid of an abstract operation to reference.</p>
<p>One of aoid or href must be specified.</p>
<h2>Example</h2>
<pre><code class="language-html">
<p>The clause element is specified in <emu-xref href="#emu-clause"></emu-xref>.</p>
<p>See <emu-xref href="#emu-note" title></emu-xref> for information on the emu-note element.</p>
<p>The <emu-xref href="#emu-biblio">biblio element</emu-xref> supports xref to external specs.</p>
<p><emu-xref aoid="Get"></emu-xref> is an abstract operation from ES6</p>
<p><emu-alg>1. [id="step-label-example"] Example labeled step.</emu-alg></p>
<p>You can reference step <emu-xref href="#step-label-example"></emu-xref> like this</p>
</code></pre>
<h3>Result</h3>
<aside class="result">
<p>The clause element is specified in <emu-xref href="#emu-clause"></emu-xref>.</p>
<p>See <emu-xref href="#emu-note" title></emu-xref> for information on the emu-note element.</p>
<p>The <emu-xref href="#emu-biblio">biblio element</emu-xref> will eventually support xref to external specs.</p>
<p><emu-xref aoid="Get"></emu-xref> is an abstract operation from ES6</p>
<p>
<emu-alg>
1. [id="step-label-example"] Example labeled step.
</emu-alg>
</p>
<p>You can reference step <emu-xref href="#step-label-example"></emu-xref> like this</p>
</aside>
</emu-clause>
<emu-clause id="emu-not-ref" namespace="emu-not-ref">
<h1>emu-not-ref</h1>
<p>Suppresses automatic linking to definitions.</p>
<h2>Example</h2>
<pre><code class="language-html">
<div id="not-ref-section-1">
<p>An <dfn>example</dfn> is used for illustrative purposes.</p>
</div>
<div id="not-ref-section-2">
<p>When a word defined in another section (or algorithm step) is used, as in this example, it is normally automatically linked to the section containing the definition.</p>
<p>When such a word should not be automatically linked, for <emu-not-ref>example</emu-not-ref> when using its colloquial definition, it can be wrapped with this tag to surpress the automatic linking.</p>
</div>
</code></pre>
<h3>Result</h3>
<aside class="result">
<div id="not-ref-section-1">
<p>An <dfn>example</dfn> is used for illustrative purposes.</p>
</div>
<div id="not-ref-section-2">
<p>When a word defined in another section (or algorithm step) is used, as in this example, it is normally automatically linked to the section containing the definition.</p>
<p>When such a word should not be automatically linked, for <emu-not-ref>example</emu-not-ref> when using its colloquial definition, it can be wrapped with this tag to surpress the automatic linking.</p>
</div>
</aside>
</emu-clause>
<emu-clause id="emu-figure">
<h1>emu-figure</h1>
<p>Creates a figure that can be referenced by <emu-xref href="#emu-xref" title></emu-xref>. Add a caption using a child `emu-caption` element.</p>
<h2>Attributes</h2>
<p><b>informative:</b> Optional: If present, the figure is informative. Otherwise it is normative.</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-figure>
<emu-caption>Example figure<emu-caption>
[[insert some awesome graphic here, maybe something like figure 2]]
</emu-figure>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-figure>
<emu-caption>Example figure</emu-caption>
[[insert some awesome graphic here, maybe something like figure 2]]
</emu-figure>
</aside>
</emu-clause>
<emu-clause id="emu-table">
<h1>emu-table</h1>
<p>Creates a table that can be referenced by <emu-xref href="#emu-xref" title></emu-xref>. Add a caption using a child `emu-caption` element.</p>
<h2>Attributes</h2>
<p><b>caption:</b> Optional: Caption for the example</p>
<p><b>informative:</b> Optional: If present, the table is informative. Otherwise it is normative.</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-table>
<emu-caption>Example table<emu-caption>
<table>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
</table>
</emu-table>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-table>
<emu-caption>Example table</emu-caption>
<table>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
<tr><td>Value</td><td>Value 2</td></tr>
</table>
</emu-table>
</aside>
</emu-clause>
<emu-clause id="emu-example">
<h1>emu-example</h1>
<p>Creates an informative example that can be referenced by <emu-xref href="#emu-xref" title></emu-xref>. Examples are numbered based on how many are present in the example's containing clause.</p>
<h2>Attributes</h2>
<p><b>caption:</b> Optional: Caption for the example</p>
<h2>Example</h2>
<pre><code class="language-html">
<emu-example caption="Example Example">
This is an example.
</emu-example>
<emu-example caption="Another Example Example">
This is also an example.
</emu-example>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-example caption="Example Example">
This is an example.
</emu-example>
<emu-example caption="Another Example Example">
This is also an example.
</emu-example>
</aside>
</emu-clause>
<emu-clause id="emu-biblio">
<h1>emu-biblio</h1>
<p>Links a bibliography file. The bibliography file is a JSON document containing URLs for referenced documents along with any algorithms they define.</p>
<h2>Attributes</h2>
<p><b>href:</b> Required: URL of the biblio file, interpreted relative to the containing document.</p>
<h2>Example</h2>
<b>biblio.json</b>
<pre><code class="language-json">
{
"https://tc39.github.io/ecma262/": [
{
"type": "op",
"id": "sec-returnifabrupt",
"aoid": "ReturnIfAbrupt"
},
{
"type": "op",
"id": "sec-get-o-p",
"aoid": "Get"
}
]
}
</code></pre>
<b>spec.emu</b>
<pre><code class="language-html">
<emu-biblio href="./biblio.json"></emu-biblio>
<emu-alg>
1. Let _res_ be Get(_obj_, _key_).
1. ReturnIfAbrupt(_res_).
</emu-alg>
</code></pre>
<h3>Result</h3>
<aside class="result">
<emu-alg>
1. Let _res_ be Get(_obj_, _key_).
1. ReturnIfAbrupt(_res_).
</emu-alg>
</aside>
</emu-clause>
<emu-clause id="emu-grammar">
<h1>emu-grammar</h1>
<p>Text inside emu-grammar elements is parsed using <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a>. The syntax is essentially identical to the notational conventions in ECMAScript (minus formatting). See the <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown readme</a>.</p>
<p>Grammar will be displayed as an inline element flowing with text unless it is the immediate child of an emu-clause-like element.</p>
<h2>Attributes</h2>
<p><b>collapsed:</b> If present, productions are displayed in collapsed format with LHS and RHS on the same line.</p>
<p><b>example:</b> If present, the element is an example.</p>
<p><b>primary:</b> Optional: Deprecated in favor of type="definition".</p>
<p><b>type:</b> Optional: Disposition of the grammar. If absent, it is considered to reference productions defined elsewhere.</p>
<ul>
<li>"definition": The grammar is an authoritative source for productions which should be the target of references.</li>
<li>"example": Deprecated in favor of the <b>example</b> attribute.</li>
</ul>
<h2>Example</h2>
<pre><code class="language-html">
<p>
<emu-grammar type="definition" collapsed example>
HexIntegerLiteral :: `0x` HexDigits
</emu-grammar>
is a shorthand for:
</p>
<emu-grammar type="definition" example>
HexIntegerLiteral :: `0` `x` HexDigits
</emu-grammar>
</code></pre>
<h3>Result</h3>
<aside class="result">
<p>
<emu-grammar type="definition" collapsed example>
HexIntegerLiteral :: `0x` HexDigits
</emu-grammar>
is a shorthand for:
</p>
<emu-grammar type="definition" example>
HexIntegerLiteral :: `0` `x` HexDigits
</emu-grammar>
</aside>
</emu-clause>
<emu-clause id="grammar">
<h1>Directly Specifying Grammar</h1>
<p>Although discouraged, it is possible to directly specify grammar using the <a href="#emu-production">emu-production</a> element and related elements emitted by <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a>.</p>
<h2>Lexical Grammar Examples</h2>
<pre><code class="language-html">
<emu-production name="DecimalDigit" type="lexical" oneof>
<emu-rhs>0 1 2 3 4 5 6 7 8 9</emu-rhs>
</emu-production>
<emu-production name="Identifier" type="lexical">
<emu-rhs><emu-nt>IdentifierName</emu-nt> <emu-gmod>but not
<emu-nt>ReservedWord</emu-nt></emu-gmod></emu-rhs>
</emu-production>
<emu-production name="SourceCharacter" type="lexical">
<emu-rhs><emu-gprose>any Unicode code point</emu-gprose></emu-rhs>
</emu-production>
</code></pre>
<h3>Result</h3>
<aside class="result" data-simulate-tagname="emu-clause">
<emu-production name="DecimalDigit" type="lexical" oneof primary>
<emu-rhs>0 1 2 3 4 5 6 7 8 9</emu-rhs>
</emu-production>
<emu-production name="Identifier" type="lexical" primary>
<emu-rhs><emu-nt>IdentifierName</emu-nt> <emu-gmod>but not
<emu-nt>ReservedWord</emu-nt></emu-gmod></emu-rhs>
</emu-production>
<emu-production name="SourceCharacter" type="lexical" primary>
<emu-rhs><emu-gprose>any Unicode code point</emu-gprose></emu-rhs>
</emu-production>
</aside>
<h2>Syntactic Grammar Examples</h2>
<pre><code class="language-html">
<emu-production name="ExpressionStatement" params="Yield">
<emu-rhs>
<emu-gann>lookahead ∉ { <emu-t>{</emu-t>, <emu-t>function</emu-t>,
<emu-t>class</emu-t>, <emu-t>let [</emu-t> }</emu-gann>
</emu-rhs>
</emu-production>
<emu-production name="IterationStatement">
<emu-rhs>for ( <emu-nt>LexicalDeclaration</emu-nt> ; <emu-nt optional>Expression</emu-nt> ;
<emu-nt optional>Expression</emu-nt> ) <emu-nt>Statement</emu-nt></emu-rhs>
</emu-production>
<emu-production name="StatementList" params="Return, In">
<emu-rhs constraints="~Return"><emu-nt>ReturnStatement</emu-nt></emu-rhs>
<emu-rhs><emu-nt>ExpressionStatement</emu-nt></emu-rhs>
</emu-production>
</code></pre>
<h3>Result</h3>
<aside class="result" data-simulate-tagname="emu-clause">
<emu-production name="ExpressionStatement" params="Yield" primary>
<emu-rhs>
<emu-gann>lookahead ∉ { <emu-t>{</emu-t>, <emu-t>function</emu-t>,
<emu-t>class</emu-t>, <emu-t>let [</emu-t> }</emu-gann>
</emu-rhs>
</emu-production>
<emu-production name="IterationStatement" primary>
<emu-rhs>for ( <emu-nt>LexicalDeclaration</emu-nt> ; <emu-nt optional>Expression</emu-nt> ;
<emu-nt optional>Expression</emu-nt> ) <emu-nt>Statement</emu-nt></emu-rhs>
</emu-production>
<emu-production name="StatementList" params="Return, In" primary>
<emu-rhs constraints="~Return"><emu-nt>ReturnStatement</emu-nt></emu-rhs>
<emu-rhs><emu-nt>ExpressionStatement</emu-nt></emu-rhs>
</emu-production>
</aside>
<emu-clause id="emu-production">
<h1>emu-production</h1>
<p>This is the top level element that contains a grammar production associating a shared <dfn>LHS</dfn> (left-hand side) <emu-xref href="#emu-nt" title></emu-xref> non-terminal symbol with one or more <emu-xref href="#emu-rhs" title></emu-xref> elements containing arbitrary <dfn>RHS</dfn> (right-hand side) sequences of terminal and non-terminal symbols.</p>
<p>The production will be displayed as an inline element flowing with text unless it is the immediate child of an emu-clause-like element or if its containing emu-grammar element is an immediate child of an emu-clause-like element.</p>
<h2>Attributes</h2>
<p><b>name:</b> Required: Name of the production (i.e. the LHS). Should conform with the syntax of <a href="https://www.unicode.org/reports/tr31/#D1">Unicode Standard Annex #31, UAX31-D1 Default Identifier Syntax</a> and not include any underscore (U+005F LOW LINE “<b>_</b>”).</p>
<p><b>collapsed:</b> If present, the production is displayed in collapsed format with LHS and RHS on the same line.</p>
<p><b>oneof:</b> If present, the production is a one-of production. See the DecimalDigit example <emu-xref href="#grammar">above</emu-xref>.</p>
<!-- what does it even mean for a LHS to be optional??? -->
<p><b>optional:</b> If present, the LHS is marked as optional.</p>
<p><b>params:</b> Parameters for this production. Multiple parameters are separated by commas with optional whitespace.</p>
<p><b>primary:</b> Optional: The production is authoritative and should be the target of references.</p>
<p><b>type:</b> Optional: Type of production. If absent, the production is considered syntactic.</p>
<ul>
<li>"lexical": The production is part of a lexical grammar, and should render with the LHS and RHS separated by two colons “<b>::</b>”.</li>
<li>"regexp": Deprecated because the ECMAScript regular expression grammar is considered to be lexical. Productions with this type render with the LHS and RHS separated by three colons “<b>:::</b>”.</li>
</ul>
</emu-clause>
<emu-clause id="emu-rhs">
<h1>emu-rhs</h1>
<p>Describes one right-hand-side alternative of a production. Interior text nodes are split on each space and turned into terminal symbols. For example, the following elements are semantically equivalent:</p>
<pre><code class="language-html">
<emu-rhs>a b c</emu-rhs>
<emu-rhs><emu-t>a</emu-t> <emu-t>b</emu-t> <emu-t>c</emu-t></emu-rhs>
</code></pre>
<h2>Attributes</h2>
<p><b>constraints:</b> any constraints for this RHS. Multiple constraints are separated by commas with optional whitespace. See the StatementList example <emu-xref href="#grammar">above</emu-xref>.</p>
<p><b>a:</b> Optional: alternative id used to reference a particular RHS from an <emu-xref href="#emu-prodref" title></emu-xref>. Must be unique for all `emu-rhs` elements inside an <emu-xref href="#emu-production" title></emu-xref>.</p>
</emu-clause>
<emu-clause id="emu-nt">
<h1>emu-nt</h1>
<p>References a non-terminal symbol by the <b>name</b> attribute of its <emu-xref href="#emu-production" title></emu-xref>.</p>
<h2>Attributes</h2>
<p><b>example:</b> If present, the element is an example.</p>
<p><b>optional:</b> If present, the non-terminal is optional in its containing RHS.</p>
<p><b>params:</b> Parameters for this non-terminal. Multiple parameters are separated by commas with optional whitespace.</p>
</emu-clause>
<emu-clause id="emu-t">
<h1>emu-t</h1>
<p>References a terminal symbol. No attributes are available. Manual creation of these elements should be unnecessary as <a href="#emu-rhs">they are created automatically inside emu-rhs elements</a>.</p>
</emu-clause>
<emu-clause id="emu-gmod">
<h1>emu-gmod</h1>
<p>Contains well-known modifiers to a right-hand side of a production. The only well-known modifier at present is the "but not" modifier. See the Identifier example <emu-xref href="#grammar">above</emu-xref>.</p>
</emu-clause>
<emu-clause id="emu-gann">
<h1>emu-gann</h1>
<p>Contains well-known annotations to to a right-hand side of a production. The only well-known modifiers at present are "lookahead" and "empty". See the ExpressionStatement example <emu-xref href="#grammar">above</emu-xref>. Any text inside a gann element is wrapped in square brackets.</p>
</emu-clause>
<emu-clause id="emu-gprose">
<h1>emu-gprose</h1>
<p>Contains any prose text that describes a production. See the SourceCharacter example <emu-xref href="#grammar">above</emu-xref>.</p>
</emu-clause>
<emu-clause id="emu-prodref">
<h1>emu-prodref</h1>
<p>References a production or RHS defined elsewhere. Ecmarkup will insert either the entire production or a particular RHS depending on attributes.</p>
<h2>Attributes</h2>
<p><b>name:</b> Required: Name of the production to reference.</p>
<p><b>a:</b> Optional. If present, references a particular RHS with the specified alternative id in its <b>a</b> attribute.</p>
</emu-clause>
</emu-clause>
<emu-clause id="emu-import" oldids="imports">
<h1>emu-import</h1>
<p>Imports are treated specially in an ecmarkup document. Every import is inlined into its parent document at the location of the import tag. This is useful for breaking your spec document up into many smaller pieces.</p>
<h2>Attributes</h2>
<p><b>href:</b> Required: URL of the document to import, interpreted relative to the document containing the `emu-import`.</p>
</emu-clause>
<emu-clause id="miscellaneous" oldids="css">
<h1>Other Styles & Conventions</h1>
<emu-clause id="oldids">
<h1>Old IDs</h1>
<p>Old IDs for any element can be stored separated by commas with optional whitespace inside an <b>oldids</b> attribute, allowing links using them to continue working as expected.</p>
</emu-clause>
<emu-clause id="ins-del">
<h1>Indicating Changes</h1>
<p>The `ins` and `del` HTML elements can be used to mark insertions and deletions respectively. When adding or removing block content (such as entire list items, paragrpahs, clauses, grammar RHSes, etc.), use a class of "block".</p>
<h2>Inline Example</h2>
<pre><code class="language-html">ECMAScript <del>6</del><ins>2015</ins> <del>will be ratified</del><ins>was ratified</ins> in June, 2015.</code></pre>
<h3>Result</h3>
<aside class="result">
<p>ECMAScript <del>6</del><ins>2015</ins> <del>will be ratified</del><ins>was ratified</ins> in June, 2015.</p>
</aside>
<h2>Block Example</h2>
<pre><code class="language-html">
<emu-production name="HoistableDeclaration">
<emu-rhs><emu-nt>FunctionDeclaration</emu-nt></emu-rhs>
<emu-rhs><emu-nt>GeneratorDeclaration</emu-nt></emu-rhs>
<ins class="block"><emu-rhs><emu-nt>AsyncFunctionDeclaration</emu-nt></emu-rhs></ins>
</emu-production>
</code></pre>
<h3>Result</h3>
<aside class="result" data-simulate-tagname="emu-clause">
<emu-production name="HoistableDeclaration">
<emu-rhs><emu-nt>FunctionDeclaration</emu-nt></emu-rhs>
<emu-rhs><emu-nt>GeneratorDeclaration</emu-nt></emu-rhs>
<ins class="block"><emu-rhs><emu-nt>AsyncFunctionDeclaration</emu-nt></emu-rhs></ins>
</emu-production>
</aside>
</emu-clause>
<emu-clause id="pre-code">
<h1>Code Listings</h1>
<p>Create a code listing using `<pre><code>`. The `code` element takes a class of `javascript`, `html`, or any other language provided by <a href="https://highlightjs.org/">highlightjs</a>. Ecmarkup will trim any leading blank lines and also normalize the indentation based on the indentation of the first line.</p>
</emu-clause>
</emu-clause>