diff --git a/proposals/Template-Instantiation.md b/proposals/Template-Instantiation.md
index d05e94c7..83d2963b 100644
--- a/proposals/Template-Instantiation.md
+++ b/proposals/Template-Instantiation.md
@@ -44,27 +44,27 @@ partial interface HTMLTemplateElement {
Concretely, use case (1) is addressed by the component instancing a template as follows:
-```
+``` js
// shadowRoot is the shadow root of a contact card component
shadowRoot.appendChild(template.createInstance());
```
Use case (2) is addressed as follows:
-```
-// Template content is `''`
+``` js
+// Template content is ``
shadowRoot.appendChild(template.createInstance({name: "Ryosuke Niwa", email: "rniwa@webkit.org"}));
```
When `createInstance` is called with a JavaScript object, we automatically substitute every mustache syntax with the corresponding value of the property in the object. The resultant DOM would look as though we parsed the following HTML:
-```
+``` html
Ryosuke Niwa
Email: Ryosuke Niwa
Email: {{ x }} world
```
@@ -95,34 +95,34 @@ For example, suppose a library wanted to provide an ability to auto-linkify a UR
Conceptually we need two objects, say *FY* and *X*, that represent `{{ f(y) }}` and `{{ x }}` which libraries and frameworks can use to read the original expression in each mustache, and use it to update the DOM. We call these objects **template parts**. Template parts should allow the inspection of content of `{{~}}` like so:
-```
+``` js
FY.expression; // Returns "f(y)"
X.expression; // Returns "x".
```
Template parts should allow the assignment of a new value after libraries and frameworks evaluated `f(y)` (here, assume `f(y)` evaluates to “bar” and `x` evaluates to “hello”:
-```
+``` js
FY.value = 'bar'; // Equivalent to div.setAttribute('class', 'foo bar').
X.value = 'hello'; // Equivalent to div.textContent = 'hello world’.
```
For template parts which appear as text nodes should also support taking multiple and arbitrary DOM nodes instead of just a text value:
-```
+``` js
// Insert span and a text node in place of {{ x }}.
X.replace([document.createElement('span'), 'hello']);
```
Or perhaps we would even want to parse HTML:
-```
+``` js
X.replaceHTML('hello');
```
For use case (5), we need to be able to inspect the attribute name of a template part as in:
-```
+``` js
FY.attributeName; // Returns "class"
```
@@ -138,15 +138,13 @@ Each template part represents an occurrence of a mustache syntax in the template
Consider, for example, the following template:
-```
-
-
-
+``` html
+
```
That template creates template parts: `NodeTemplatePart` for `{{name}}`, `AttributeTemplatePart` for `{{email}}` in the `href` attribute of the anchor element, and `NodeTemplatePart` for `{{email}}` for the occurrence inside the anchor element. In order to use this template, a template library or the page author would have had to define a `my-template-type` template type; e.g.:
-```
+``` js
document.defineTemplateType('my-template-type', {
processCallback: function (instance, parts, state) {
for (const part of parts)
@@ -157,14 +155,14 @@ document.defineTemplateType('my-template-type', {
This template process callback, for illustration purposes, is a simplified version of the **default template process callback**, which is used when the `type` content attribute is omitted on a `template` element. It goes through each template part (i.e., each occurrence of `{{ X }}`) and replaces it with the state object's value looked up by the template part's expression (e.g. `X` for `{{ X }}`). Once defined, this template process callback is invoked whenever the `createInstance` method is invoked on a `template` element of the type `my-template-type`; e.g.:
-```
+``` js
rniwa = {name: "R. Niwa", email: "rniwa@webkit.org"};
document.body.appendChild(contactTemplate.createInstance(rniwa));
```
The above code produces the same DOM as the following code under `document.body`:
-```
+``` js
document.body.innerHTML = '';
```
@@ -179,7 +177,7 @@ We allow inserting and removing preceding siblings and succeeding siblings in so
Let's suppose we wanted to create a template type which remembers the state object being passed when it was created, and automatically updates the instance whenever property values are changed at some checkpoints (e.g., at the next `requestAnimationFrame`). We can implement this using a template create callback as follows:
-```
+``` js
document.defineTemplateType('self-updating-template', {
createCallback: function (instance, parts, state) {
onCheckPoint(() => instance.update(state));
@@ -246,7 +244,7 @@ In the default template process callback, the fallback or default value of a tem
Note that with this approach, we have an option to address the need to [declaratively instantiate a shadow tree](https://github.com/whatwg/dom/issues/510) by adding a new callback which gets called for each appearance of a template element as follows if we so desired:
-```
+``` html
~