Add syntax highlighting to docs

Closes #46
mockoon · Nov 18, 2020 · 10c2229 · 10c2229
1 parent 781e235
commit 10c2229
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 41 deletions.
diff --git a/content/docs/cors.md b/content/docs/cors.md
@@ -28,7 +28,7 @@ You need to restart the environment for the change to take effect.
 
 Mockoon will now automatically answer with a 200 HTTP status code to all preflight OPTIONS requests. The following headers will also be added to the response:
 
-```
+```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
 Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With

diff --git a/content/docs/templating.md b/content/docs/templating.md
@@ -72,7 +72,7 @@ Templating will work in the body editor without consideration for the Content-Ty
 
 Here is an example of what you can do with this templating system:
 
-```
+```json
 {
   "userId": "{{ urlParam 'id' }}",
   "name": "{{ queryParam 'name' 'John' }}",
@@ -106,10 +106,10 @@ Here is an example of what you can do with this templating system:
 
 The above template produces the following body with this request:
 
-```
+```http
 GET /user/123456?name=john
 Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
-Body:
+
 {
   "element": [
     {"title": "My title"}
@@ -119,7 +119,7 @@ Body:
 
 Response:
 
-```
+```json
 {
   "userId": "5",
   "name": "john",
@@ -147,7 +147,7 @@ Response:
 
 This system is flexible enough to generate a lot of different contents like CSV files:
 
-```
+```csv
 firstname,lastname,countryCode
 {{# repeat 10 }}
   {{ faker 'name.firstName' }},{{ faker 'name.lastName' }},{{ faker 'address.countryCode' }}
@@ -156,7 +156,7 @@ firstname,lastname,countryCode
 
 Response:
 
-```
+```csv
 firstname,lastname,countryCode
 Max,Magby,AZ
 Stan,Muldoon,HM
@@ -175,14 +175,14 @@ Vaughn,Neal,MO
 By using the `base64` helper, you can encode parts or entirety of the response by enclosing the content in a block helper.  
 Inline helper:
 
-```
+```html
 {{base64 'test'}}
-{{base64 (body 'path.to.property)}}
+{{base64 (body 'path.to.property')}}
 ```
 
 Block helper: 
 
-```
+```csv
 {{# base64}}
 firstname,lastname,countryCode
 {{# repeat 10 }}

diff --git a/content/docs/v1.10.0/cors.md b/content/docs/v1.10.0/cors.md
@@ -28,7 +28,7 @@ You need to restart the environment for the change to take effect.
 
 Mockoon will now automatically answer with a 200 HTTP status code to all preflight OPTIONS requests. The following headers will also be added to the response:
 
-```
+```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
 Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With

diff --git a/content/docs/v1.10.0/templating.md b/content/docs/v1.10.0/templating.md
@@ -71,7 +71,7 @@ Templating will work in the body editor without consideration for the Content-Ty
 
 Here is an example of what you can do with this templating system:
 
-```
+```json
 {
   "userId": "{{ urlParam 'id' }}",
   "name": "{{ queryParam 'name' 'John' }}",
@@ -105,10 +105,10 @@ Here is an example of what you can do with this templating system:
 
 The above template produces the following body with this request:
 
-```
+```http
 GET /user/123456?name=john
 Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
-Body:
+
 {
   "element": [
     {"title": "My title"}
@@ -118,7 +118,7 @@ Body:
 
 Response:
 
-```
+```json
 {
   "userId": "5",
   "name": "john",
@@ -146,7 +146,7 @@ Response:
 
 This system is flexible enough to generate a lot of different contents like CSV files:
 
-```
+```csv
 firstname,lastname,countryCode
 {{# repeat 10 }}
   {{ faker 'name.firstName' }},{{ faker 'name.lastName' }},{{ faker 'address.countryCode' }}
@@ -155,7 +155,7 @@ firstname,lastname,countryCode
 
 Response:
 
-```
+```csv
 firstname,lastname,countryCode
 Max,Magby,AZ
 Stan,Muldoon,HM
@@ -174,14 +174,14 @@ Vaughn,Neal,MO
 By using the `base64` helper, you can encode parts or entirety of the response by enclosing the content in a block helper.  
 Inline helper:
 
-```
+```html
 {{base64 'test'}}
-{{base64 (body 'path.to.property)}}
+{{base64 (body 'path.to.property')}}
 ```
 
 Block helper: 
 
-```
+```csv
 {{# base64}}
 firstname,lastname,countryCode
 {{# repeat 10 }}

diff --git a/content/docs/v1.7.0/cors.md b/content/docs/v1.7.0/cors.md
@@ -28,7 +28,7 @@ You need to restart the environment for the change to take effect.
 
 Mockoon will now automatically answer with a 200 HTTP status code to all preflight OPTIONS requests. The following headers will also be added to the response:
 
-```
+```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
 Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With

diff --git a/content/docs/v1.7.0/templating.md b/content/docs/v1.7.0/templating.md
@@ -58,7 +58,7 @@ Templating will work in the body editor without consideration for the Content-Ty
 
 Here is an example of what you can do with this templating system:
 
-```
+```json
 {
   "userId": "{{ urlParam 'id'}}",
   "name": "{{ queryParam 'name' 'John' }}",
@@ -92,10 +92,10 @@ Here is an example of what you can do with this templating system:
 
 The above template produces the following body with this request:
 
-```
+```http
 GET /user/123456?name=john
 Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
-Body:
+
 {
   "element": [
     {"title": "My title"}
@@ -105,7 +105,7 @@ Body:
 
 Response:
 
-```
+```json
 {
   "userId": "5",
   "name": "john",
@@ -133,7 +133,7 @@ Response:
 
 This system is flexible enough to generate a lot of different contents like CSV files:
 
-```
+```csv
 firstname,lastname,countryCode
 {{# repeat 10}}
   {{ firstName }},{{ lastName }},{{ countryCode }}
@@ -142,7 +142,7 @@ firstname,lastname,countryCode
 
 Response:
 
-```
+```csv
 firstname,lastname,countryCode
 Max,Magby,AZ
 Stan,Muldoon,HM

diff --git a/content/docs/v1.8.0/cors.md b/content/docs/v1.8.0/cors.md
@@ -28,7 +28,7 @@ You need to restart the environment for the change to take effect.
 
 Mockoon will now automatically answer with a 200 HTTP status code to all preflight OPTIONS requests. The following headers will also be added to the response:
 
-```
+```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
 Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With

diff --git a/content/docs/v1.8.0/templating.md b/content/docs/v1.8.0/templating.md
@@ -58,7 +58,7 @@ Templating will work in the body editor without consideration for the Content-Ty
 
 Here is an example of what you can do with this templating system:
 
-```
+```json
 {
   "userId": "{{ urlParam 'id' }}",
   "name": "{{ queryParam 'name' 'John' }}",
@@ -92,10 +92,10 @@ Here is an example of what you can do with this templating system:
 
 The above template produces the following body with this request:
 
-```
+```http
 GET /user/123456?name=john
 Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
-Body:
+
 {
   "element": [
     {"title": "My title"}
@@ -105,7 +105,7 @@ Body:
 
 Response:
 
-```
+```json
 {
   "userId": "5",
   "name": "john",
@@ -133,7 +133,7 @@ Response:
 
 This system is flexible enough to generate a lot of different contents like CSV files:
 
-```
+```csv
 firstname,lastname,countryCode
 {{# repeat 10 }}
   {{ firstName }},{{ lastName }},{{ countryCode }}
@@ -142,7 +142,7 @@ firstname,lastname,countryCode
 
 Response:
 
-```
+```csv
 firstname,lastname,countryCode
 Max,Magby,AZ
 Stan,Muldoon,HM

diff --git a/content/docs/v1.9.0/cors.md b/content/docs/v1.9.0/cors.md
@@ -28,7 +28,7 @@ You need to restart the environment for the change to take effect.
 
 Mockoon will now automatically answer with a 200 HTTP status code to all preflight OPTIONS requests. The following headers will also be added to the response:
 
-```
+```http
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
 Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With

diff --git a/content/docs/v1.9.0/templating.md b/content/docs/v1.9.0/templating.md
@@ -69,7 +69,7 @@ Templating will work in the body editor without consideration for the Content-Ty
 
 Here is an example of what you can do with this templating system:
 
-```
+```json
 {
   "userId": "{{ urlParam 'id' }}",
   "name": "{{ queryParam 'name' 'John' }}",
@@ -103,10 +103,10 @@ Here is an example of what you can do with this templating system:
 
 The above template produces the following body with this request:
 
-```
+```http
 GET /user/123456?name=john
 Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
-Body:
+
 {
   "element": [
     {"title": "My title"}
@@ -116,7 +116,7 @@ Body:
 
 Response:
 
-```
+```json
 {
   "userId": "5",
   "name": "john",
@@ -144,7 +144,7 @@ Response:
 
 This system is flexible enough to generate a lot of different contents like CSV files:
 
-```
+```http
 firstname,lastname,countryCode
 {{# repeat 10 }}
   {{ faker 'name.firstName' }},{{ faker 'name.lastName' }},{{ faker 'address.countryCode' }}
@@ -153,7 +153,7 @@ firstname,lastname,countryCode
 
 Response:
 
-```
+```csv
 firstname,lastname,countryCode
 Max,Magby,AZ
 Stan,Muldoon,HM

diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import React, { ChangeEvent, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { rsort as semverSort } from 'semver';
+import CodeHighlighter from '../../components/code-highlighter';
 import Download from '../../components/download';
 import Hero from '../../components/hero';
 import Meta from '../../components/meta';
@@ -202,6 +203,7 @@ export default function Docs(props: {
               <div className='content'>
                 <ReactMarkdown
                   source={props.topicBody}
+                  renderers={{ code: CodeHighlighter }}
                   transformLinkUri={transformLinkUri(currentVersion)}
                   linkTarget={linkTarget}
                 />