diff --git a/ui/src/components/SyntaxHighlighter.tsx b/ui/src/components/SyntaxHighlighter.tsx
index b8c1d1d..05864b8 100644
--- a/ui/src/components/SyntaxHighlighter.tsx
+++ b/ui/src/components/SyntaxHighlighter.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTheme, Theme } from "@material-ui/core/styles";
-import ReactSyntaxHighlighter from "react-syntax-highlighter";
+import { Light as ReactSyntaxHighlighter } from "react-syntax-highlighter";
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
 import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
 import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
 import { isDarkTheme } from "../theme";
@@ -11,6 +12,8 @@ interface Props {
   customStyle?: object;
 }
 
+ReactSyntaxHighlighter.registerLanguage("json", json);
+
 // Theme aware syntax-highlighter component.
 export default function SyntaxHighlighter(props: Props) {
   const theme = useTheme<Theme>();