From ae888527af1ff76c74a5803e7e73a4fa7740170b Mon Sep 17 00:00:00 2001
From: Luke Schoen <ltfschoen@gmail.com>
Date: Fri, 5 Oct 2018 07:47:58 +0100
Subject: [PATCH] coloured syntax

---
 book.json                               | 10 ++++++++--
 package.json                            |  3 ++-
 packages/api-provider/src/http/index.ts |  8 +++++---
 packages/api-provider/src/ws/index.ts   | 16 ++++++++++------
 packages/api-rx/src/index.ts            |  8 +++++---
 packages/api/src/index.ts               | 16 ++++++++++------
 6 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/book.json b/book.json
index c865b4f2a090..76b7c9ebdf2f 100644
--- a/book.json
+++ b/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"
+    }
+  }
 }
diff --git a/package.json b/package.json
index 2a2919c74b8e..11d7905e9e3b 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/packages/api-provider/src/http/index.ts b/packages/api-provider/src/http/index.ts
index 9b4235a49e12..468696ecc136 100644
--- a/packages/api-provider/src/http/index.ts
+++ b/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]]
  */
diff --git a/packages/api-provider/src/ws/index.ts b/packages/api-provider/src/ws/index.ts
index 4a152a0569d3..31b117e55742 100644
--- a/packages/api-provider/src/ws/index.ts
+++ b/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 });
diff --git a/packages/api-rx/src/index.ts b/packages/api-rx/src/index.ts
index 590db2ec6ab1..7b0df31a5361 100644
--- a/packages/api-rx/src/index.ts
+++ b/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;
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index f1e314ee6236..3045fad68694 100644
--- a/packages/api/src/index.ts
+++ b/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 }) =>