Fix syntax highlighting in some documentation examples (#2050)

lit · Aug 16, 2021 · 8758e06 · 8758e06
1 parent e6dc6a7
commit 8758e06
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 33 deletions.
diff --git a/packages/lit-html/src/directives/cache.ts b/packages/lit-html/src/directives/cache.ts
@@ -88,7 +88,7 @@ class CacheDirective extends Directive {
  *
  * Example:
  *
- * ```
+ * ```js
  * let checked = false;
  *
  * html`

diff --git a/packages/lit-html/src/directives/live.ts b/packages/lit-html/src/directives/live.ts
@@ -82,7 +82,9 @@ class LiveDirective extends Directive {
  * it alone. If this is not what you want--if you want to overwrite the DOM
  * value with the bound value no matter what--use the `live()` directive:
  *
+ * ```js
  *     html`<input .value=${live(x)}>`
+ * ```
  *
  * `live()` performs a strict equality check agains the live DOM value, and if
  * the new value is equal to the live value, does nothing. This means that

diff --git a/packages/lit-html/src/directives/ref.ts b/packages/lit-html/src/directives/ref.ts
@@ -121,15 +121,16 @@ class RefDirective extends AsyncDirective {
  * followed by another call with the new element it was rendered to (if any).
  *
  * @example
+ * ```js
+ * // Using Ref object
+ * const inputRef = createRef();
+ * render(html`<input ${ref(inputRef)}>`, container);
+ * inputRef.value.focus();
  *
- *    // Using Ref object
- *    const inputRef = createRef();
- *    render(html`<input ${ref(inputRef)}>`, container);
- *    inputRef.value.focus();
- *
- *    // Using callback
- *    const callback = (inputElement) => inputElement.focus();
- *    render(html`<input ${ref(callback)}>`, container);
+ * // Using callback
+ * const callback = (inputElement) => inputElement.focus();
+ * render(html`<input ${ref(callback)}>`, container);
+ * ```
  */
 export const ref = directive(RefDirective);
 

diff --git a/packages/lit-html/src/directives/until.ts b/packages/lit-html/src/directives/until.ts
@@ -86,8 +86,10 @@ class UntilDirective extends AsyncDirective {
  *
  * Example:
  *
- *     const content = fetch('./content.txt').then(r => r.text());
- *     html`${until(content, html`<span>Loading...</span>`)}`
+ * ```js
+ * const content = fetch('./content.txt').then(r => r.text());
+ * html`${until(content, html`<span>Loading...</span>`)}`
+ * ```
  */
 export const until = directive(UntilDirective);
 

diff --git a/packages/reactive-element/src/decorators/custom-element.ts b/packages/reactive-element/src/decorators/custom-element.ts
@@ -46,7 +46,7 @@ const standardCustomElement = (
 /**
  * Class decorator factory that defines the decorated class as a custom element.
  *
- * ```
+ * ```js
  * @customElement('my-element')
  * class MyElement extends LitElement {
  *   render() {

diff --git a/packages/reactive-element/src/decorators/query-assigned-nodes.ts b/packages/reactive-element/src/decorators/query-assigned-nodes.ts
@@ -33,7 +33,7 @@ const legacyMatches =
  * @param selector A string which filters the results to elements that match
  *     the given css selector.
  *
- * * @example
+ * @example
  * ```ts
  * class MyElement {
  *   @queryAssignedNodes('list', true, '.item')

diff --git a/packages/reactive-element/src/reactive-element.ts b/packages/reactive-element/src/reactive-element.ts
@@ -449,10 +449,12 @@ export abstract class ReactiveElement
    * `getPropertyDescriptor`. To customize the options for a property,
    * implement `createProperty` like this:
    *
+   * ```ts
    * static createProperty(name, options) {
    *   options = Object.assign(options, {myOption: true});
    *   super.createProperty(name, options);
    * }
+   * ```
    *
    * @nocollapse
    * @category properties
@@ -490,22 +492,24 @@ export abstract class ReactiveElement
    * If no descriptor is returned, the property will not become an accessor.
    * For example,
    *
-   *   class MyElement extends LitElement {
-   *     static getPropertyDescriptor(name, key, options) {
-   *       const defaultDescriptor =
-   *           super.getPropertyDescriptor(name, key, options);
-   *       const setter = defaultDescriptor.set;
-   *       return {
-   *         get: defaultDescriptor.get,
-   *         set(value) {
-   *           setter.call(this, value);
-   *           // custom action.
-   *         },
-   *         configurable: true,
-   *         enumerable: true
-   *       }
+   * ```ts
+   * class MyElement extends LitElement {
+   *   static getPropertyDescriptor(name, key, options) {
+   *     const defaultDescriptor =
+   *         super.getPropertyDescriptor(name, key, options);
+   *     const setter = defaultDescriptor.set;
+   *     return {
+   *       get: defaultDescriptor.get,
+   *       set(value) {
+   *         setter.call(this, value);
+   *         // custom action.
+   *       },
+   *       configurable: true,
+   *       enumerable: true
    *     }
    *   }
+   * }
+   * ```
    *
    * @nocollapse
    * @category properties
@@ -1038,7 +1042,7 @@ export abstract class ReactiveElement
    *
    * For instance, to schedule updates to occur just before the next frame:
    *
-   * ```
+   * ```js
    * protected async performUpdate(): Promise<unknown> {
    *   await new Promise((resolve) => requestAnimationFrame(() => resolve()));
    *   super.performUpdate();
@@ -1177,12 +1181,14 @@ export abstract class ReactiveElement
    * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
    * This method should be overridden instead. For example:
    *
-   *   class MyElement extends LitElement {
-   *     async getUpdateComplete() {
-   *       await super.getUpdateComplete();
-   *       await this._myChild.updateComplete;
-   *     }
+   * ```js
+   * class MyElement extends LitElement {
+   *   async getUpdateComplete() {
+   *     await super.getUpdateComplete();
+   *     await this._myChild.updateComplete;
    *   }
+   * }
+   * ```
    * @category updates
    */
   protected getUpdateComplete(): Promise<boolean> {