Repository: nautobot/nautobot

Issue:
Syntax highlighting for JSON/YAML
As a Network Automation Engineer, I want nautobot to show properly formatted and syntax highlighted JSON & YAML whenever such data is presented in the UI, so that I can more easily consume and manage this data.

The primary focus of this story is in the presentation of the data, but a stretch goal of offering syntax highlighting in edit forms is a nice to have.

## Acceptance Criteria
> Generated by [Zenhub AI](https://www.zenhub.com/ai)

- [ ] **Syntax highlighting for JSON/YAML**
  - Given a Network Automation Engineer
  - When I view JSON or YAML data in the nautobot UI
  - Then the data should be properly formatted and syntax highlighted
  - And I should be able to easily consume and manage the data


Discussion:

Resolving patch:
diff --git a/nautobot/core/settings.py b/nautobot/core/settings.py
--- a/nautobot/core/settings.py
+++ b/nautobot/core/settings.py
@@ -646,10 +646,10 @@
             "Extend or override default Platform.network_driver translations provided by "
             '<a href="https://netutils.readthedocs.io/en/latest/user/lib_use_cases_lib_mapper/">netutils</a>. '
             "Enter a dictionary in JSON format, for example:\n"
-            "<pre>{\n"
+            '<pre><code class="language-json">{\n'
             '    "netmiko": {"my_network_driver": "cisco_ios"},\n'
             '    "pyats": {"my_network_driver": "iosxe"} \n'
-            "}</pre>",
+            "}</code></pre>",
         ),
         # Use custom field type defined above
         field_type="optional_json_field",
diff --git a/nautobot/core/templatetags/helpers.py b/nautobot/core/templatetags/helpers.py
--- a/nautobot/core/templatetags/helpers.py
+++ b/nautobot/core/templatetags/helpers.py
@@ -181,20 +181,32 @@ def render_markdown(value):
 
 @library.filter()
 @register.filter()
-def render_json(value):
+def render_json(value, syntax_highlight=True):
     """
     Render a dictionary as formatted JSON.
+
+    Unless `syntax_highlight=False` is specified, the returned string will be wrapped in a
+    `<code class="language-json>` HTML tag to flag it for syntax highlighting by highlight.js.
     """
-    return json.dumps(value, indent=4, sort_keys=True, ensure_ascii=False)
+    rendered_json = json.dumps(value, indent=4, sort_keys=True, ensure_ascii=False)
+    if syntax_highlight:
+        return format_html('<code class="language-json">{}</code>', rendered_json)
+    return rendered_json
 
 
 @library.filter()
 @register.filter()
-def render_yaml(value):
+def render_yaml(value, syntax_highlight=True):
     """
     Render a dictionary as formatted YAML.
+
+    Unless `syntax_highlight=False` is specified, the returned string will be wrapped in a
+    `<code class="language-yaml>` HTML tag to flag it for syntax highlighting by highlight.js.
     """
-    return yaml.dump(json.loads(json.dumps(value, ensure_ascii=False)), allow_unicode=True)
+    rendered_yaml = yaml.dump(json.loads(json.dumps(value, ensure_ascii=False)), allow_unicode=True)
+    if syntax_highlight:
+        return format_html('<code class="language-yaml">{}</code>', rendered_yaml)
+    return rendered_yaml
 
 
 @library.filter()
diff --git a/nautobot/extras/forms/forms.py b/nautobot/extras/forms/forms.py
--- a/nautobot/extras/forms/forms.py
+++ b/nautobot/extras/forms/forms.py
@@ -590,20 +590,20 @@ class Meta:
 
         HEADERS_HELP_TEXT = """
             Optional user-defined <a href="https://json.org/">JSON</a> data for this integration. Example:
-            <pre>{
+            <pre><code class="language-json">{
                 "Accept": "application/json",
                 "Content-Type": "application/json"
-            }</pre>
+            }</code></pre>
         """
         EXTRA_CONFIG_HELP_TEXT = """
             Optional user-defined <a href="https://json.org/">JSON</a> data for this integration. Example:
-            <pre>{
+            <pre><code class="language-json">{
                 "key": "value",
                 "key2": [
                     "value1",
                     "value2"
                 ]
-            }</pre>
+            }</code></pre>
         """
         help_texts = {
             "headers": inspect.cleandoc(HEADERS_HELP_TEXT),


Test patch:
diff --git a/nautobot/core/tests/test_templatetags_helpers.py b/nautobot/core/tests/test_templatetags_helpers.py
--- a/nautobot/core/tests/test_templatetags_helpers.py
+++ b/nautobot/core/tests/test_templatetags_helpers.py
@@ -95,12 +95,20 @@ def test_render_markdown_security(self):
 
     def test_render_json(self):
         self.assertEqual(
-            helpers.render_json({"first": [1, 2, 3]}), '{\n    "first": [\n        1,\n        2,\n        3\n    ]\n}'
+            helpers.render_json({"syntax": "highlight"}),
+            '<code class="language-json">{\n    &quot;syntax&quot;: &quot;highlight&quot;\n}</code>',
         )
-        self.assertEqual('"I am UTF-8! 😀"', helpers.render_json("I am UTF-8! 😀"))
+        self.assertEqual(
+            helpers.render_json({"first": [1, 2, 3]}, False),
+            '{\n    "first": [\n        1,\n        2,\n        3\n    ]\n}',
+        )
+        self.assertEqual('"I am UTF-8! 😀"', helpers.render_json("I am UTF-8! 😀", False))
 
     def test_render_yaml(self):
-        self.assertEqual("utf8:\n- 😀😀\n- 😀\n", helpers.render_yaml({"utf8": ["😀😀", "😀"]}))
+        self.assertEqual(
+            helpers.render_yaml({"syntax": "highlight"}), '<code class="language-yaml">syntax: highlight\n</code>'
+        )
+        self.assertEqual("utf8:\n- 😀😀\n- 😀\n", helpers.render_yaml({"utf8": ["😀😀", "😀"]}, False))
 
     def test_meta(self):
         location = models.Location.objects.first()