Make sure we apply the appropriate syntax highlighting depending on the language of the docs

5 files changed, 15 insertions, 4 deletions

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index b5e2bbb9d..d511bbfb4 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -27,6 +27,7 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from '../types';
+import { constants } from '../utils/constants';
 import { utils } from '../utils/utils';
 
 import { Badge } from './badge';
@@ -318,7 +319,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
     private _renderProperty(sectionName: string, property: Property): React.ReactNode {
         return (
             <div key={`property-${property.name}-${property.type.name}`} className="pb3">
-                <code className="hljs">
+                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
                     {property.name}:
                     <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
                 </code>
diff --git a/packages/react-docs/src/ts/components/event_definition.tsx b/packages/react-docs/src/ts/components/event_definition.tsx
index 4789b21f2..67729ac87 100644
--- a/packages/react-docs/src/ts/components/event_definition.tsx
+++ b/packages/react-docs/src/ts/components/event_definition.tsx
@@ -43,7 +43,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
                 />
                 <div style={{ fontSize: 16 }}>
                     <pre>
-                        <code className="hljs">{this._renderEventCode()}</code>
+                        <code className="hljs solidity">{this._renderEventCode()}</code>
                     </pre>
                 </div>
             </div>
diff --git a/packages/react-docs/src/ts/components/method_block.tsx b/packages/react-docs/src/ts/components/method_block.tsx
index 029662b3f..44a1db8af 100644
--- a/packages/react-docs/src/ts/components/method_block.tsx
+++ b/packages/react-docs/src/ts/components/method_block.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
 import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types';
+import { constants } from '../utils/constants';
 import { typeDocUtils } from '../utils/typedoc_utils';
 
 import { Comment } from './comment';
@@ -70,7 +71,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                         </div>
                     </div>
                 )}
-                <code className="hljs">
+                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
                     <MethodSignature
                         method={method}
                         sectionName={this.props.sectionName}
diff --git a/packages/react-docs/src/ts/components/type_definition.tsx b/packages/react-docs/src/ts/components/type_definition.tsx
index e3cd218f9..68ef4c465 100644
--- a/packages/react-docs/src/ts/components/type_definition.tsx
+++ b/packages/react-docs/src/ts/components/type_definition.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
 import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from '../types';
+import { constants } from '../utils/constants';
 import { utils } from '../utils/utils';
 
 import { Comment } from './comment';
@@ -111,7 +112,9 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                 />
                 <div style={{ fontSize: 16 }}>
                     <pre>
-                        <code className="hljs">{codeSnippet}</code>
+                        <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
+                            {codeSnippet}
+                        </code>
                     </pre>
                 </div>
                 <div style={{ maxWidth: 620 }}>
diff --git a/packages/react-docs/src/ts/utils/constants.ts b/packages/react-docs/src/ts/utils/constants.ts
index 28079e6c3..c3c74fd11 100644
--- a/packages/react-docs/src/ts/utils/constants.ts
+++ b/packages/react-docs/src/ts/utils/constants.ts
@@ -1,3 +1,9 @@
+import { SupportedDocJson } from '../types';
+
 export const constants = {
     TYPES_SECTION_NAME: 'types',
+    TYPE_TO_SYNTAX: {
+        [SupportedDocJson.Doxity]: 'solidity',
+        [SupportedDocJson.TypeDoc]: 'typescript',
+    } as { [supportedDocType: string]: string },
 };