coloured syntax

book.json

@@ -2,8 +2,14 @@
   "title": "Polkadot API Book",
   "gitbook": ">=2.4.0",
   "plugins": [
-    "include-codeblock"
+    "include-codeblock",
+    "-highlight",
+    "sunlight-highlighter"
   ],
   "root": "docs",
-  "pluginsConfig": {}
+  "pluginsConfig": {
+    "sunlight-highlighter": {
+      "theme": "gitbook"
+    }
+  }
 }

package.json

@@ -25,6 +25,7 @@
     "@polkadot/ts": "^0.1.30"
   },
   "dependencies": {
-    "gitbook-plugin-include-codeblock": "^3.2.2"
+    "gitbook-plugin-include-codeblock": "^3.2.2",
+    "gitbook-plugin-sunlight-highlighter": "^0.4.3"
   }
 }

packages/api-provider/src/http/index.ts

@@ -22,13 +22,15 @@ const ERROR_SUBSCRIBE = 'HTTP Provider does not have subscriptions, use WebSocke
  * such as new blocks or balance changes. It is usually preferrable using the [[WsProvider]].
  *
  * @example
- * <BR><PRE><CODE>
+ * <BR>
+ *
+ * ```javascript+lineNumbers:false
  * import createApi from '@polkadot/api';
  * import WsProvider from '@polkadot/api-provider/ws';
- * <BR>
+ *
  * const provider = new WsProvider('http://127.0.0.1:9933');
  * const api = createApi(provider);
- * </CODE></PRE>
+ * ```
  *
  * @see [[WsProvider]]
  */

packages/api-provider/src/ws/index.ts

@@ -43,13 +43,15 @@ interface WSProviderInterface extends ProviderInterface {
  * @description Unlike the [[HttpProvider]], it does support subscriptions and allows
  * listening to events such as new blocks or balance changes.
  * @example
- * <BR><PRE><CODE>
+ * <BR>
+ *
+ * ```javascript+lineNumbers:false
  * import createApi from '@polkadot/api';
  * import WsProvider from '@polkadot/api-provider/ws';
- * <BR>
+ *
  * const provider = new WsProvider('ws://127.0.0.1:9944');
  * const api = createApi(provider);
- * </CODE></PRE>
+ * ```
  *
  * @see [[HttpProvider]]
  */
@@ -176,16 +178,18 @@ export default class WsProvider extends E3.EventEmitter implements WSProviderInt
    * @return {Promise<number>}                     Promise resolving to the dd of the subscription you can use with [[unsubscribe]].
    *
    * @example
-   * <BR><PRE><CODE>
+   * <BR>
+   *
+   * ```javascript+lineNumbers:true+lineNumberStart:1
    * const provider = new WsProvider('ws://127.0.0.1:9944');
    * const api = createApi(provider);
-   * <BR>
+   *
    * api.state.storage([[storage.balances.freeBalance, <Address>]], (_, values) => {
    *   console.log(values)
    * }).then((subscriptionId) => {
    *   console.log('balance changes subscription id: ', subscriptionId)
    * })
-   * </CODE></PRE>
+   * ```
    */
   async subscribe (type: string, method: string, params: Array<any>, callback: ProviderInterface$Callback): Promise<number> {
     const id = await this.send(method, params, { callback, type });

packages/api-rx/src/index.ts

@@ -26,13 +26,15 @@ type CachedMap = {
  * @description It allows wrapping API components with observables using RxJS.
  *
  * @example
- * <BR><PRE><CODE>
+ * <BR>
+ *
+ * ```javascript+lineNumbers:false
  * import RxApi from '@polkadot/api';
  * import WsProvider from '@polkadot/api-provider/ws';
- * <BR>
+ *
  * const provider = new WsProvider('http://127.0.0.1:9944');
  * const rxapi = new RxApi(provider);
- * </CODE></PRE>
+ * ```
  */
 export default class RxApi implements RxApiInterface {
   private _api: ApiInterface;

packages/api/src/index.ts

@@ -18,13 +18,15 @@ import isFunction from '@polkadot/util/is/function';
  * @summary The API may use a HTTP or WebSockets provider.
  * @description It allows for querying a Polkadot Client Node.
  * @example
- * <BR><PRE><CODE>
+ * <BR>
+ *
+ * ```javascript+lineNumbers:false
  * import Api from '@polkadot/api';
  * import WsProvider from '@polkadot/api-provider/ws';
- * <BR>
+ *
  * const provider = new WsProvider('http://127.0.0.1:9944');
  * const api = new Api(provider);
- * </CODE></PRE>
+ * ```
  */
 export default class Api implements ApiInterface {
   private _provider: ProviderInterface;
@@ -56,11 +58,13 @@ export default class Api implements ApiInterface {
    * Formats the name, inputs and outputs into a human-readable string. This contains the input parameter names input types and output type.
    *
    * @example
-   * <BR><PRE><CODE>
-   * import Api from '@polkadot/Api';
    * <BR>
+   *
+   * ```javascript+lineNumbers:false
+   * import Api from '@polkadot/Api';
+   *
    * Api.signature({ name: 'test_method', params: [ { name: 'dest', type: 'Address' } ], type: 'Address' }); // => test_method (dest: Address): Address
-   * </CODE></PRE>
+   * ```
    */
   static signature ({ method, params, type }: Method): string {
     const inputs = params.map(({ name, type }) =>