Home
Posts

How to Highlight JSON code in HTML using CSS Without External Library

D Shwari

Highlight JSON code using CSS without external Library

Solution: 


<html>
<head>
</head>
<body>
      <h1>Highlighted JSON</h1>
      <pre id="json-container" class="json">
    
    </pre>
</body>
</html>  
     
 
   <style>
   .json .key {color: #ce9178;  /* skyblue for keys */ }
   .json .value {color: blue; /* orange for keys */  }
   .json .string {color: blue; /* Dark blue for strings */}
   .json .number {color: #005cc5; /* Blue for numbers */}
   .json .boolean {color: #FF0000 ; /* Purple for booleans */}
   .json .null {color: #FF0000; /* Red for null */}
   .json .punctuation {color: black; /* Dark gray for punctuation */}
   .json  {
   white-space: pre-wrap;         
   padding: 23px;
   border-radius: 55px;
   overflow-x: auto;         


   font-size: 13px; 
   line-height: 18px;
   letter-spacing: 0px;
   width: 80%;
   height: 286px;
   }
   pre {color:red;
   font-family: "Courier New";
   background-color: #f5f5f5;        

   }
</style> 
       

<script>
   // Example JSON data
   const jsonData = {"menu":{
   "header":"SVG Viewer",
   "items": [
   {"id":"tyyyyyrue"},
   {"id":"null", "label": "Open New", "tabel": " New"},

   {"id": "ZoomIn", "label": "Zoom In"},
   {"id": "ZoomOut", "label": "Zoom Out"},
   {"id": "OriginalView", "label": "Original View"},

   {"id": "Quality"},
   {"id": "Pause"},
   {"id": "Mute"},

   {"id": "Find", "label": "67"},
   {"id": "FindAgain", "label": "Find Again"},
   {"id": "Copy"},
   {"id": "CopyAgain", "label": "Copy Again"},
   {"id": "CopySVG", "label": "Copy SVG"},
   {"id": "ViewSVG", "label": "View SVG"},
   {"id": "ViewSource", "label": "View Source"},
   {"id": "SaveAs", "label": "Save As"},

   {"id": "Help"},
   {"id": "About", "label": "About Adobe CVG Viewer..."}
   ]
   }};

   function syntaxHighlight(json) {
       json = JSON.stringify(json, null, 2); // Format JSON with indentation
       json = json
           .replace(/&/g, "&amp;")
           .replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")
           .replace(/"([^"]+)": \s*"(.*?)"/g, '<span class="key">"$1":</span><span class="value">"$2"</span>') // Highlight strings                 
           .replace(/(\b\d+\b)/g, '<span class="number">$1</span>') // Highlight numbers
           .replace(/(\btrue\b|\bfalse\b)/g, '<span class="boolean">$1</span>') // Highlight booleans
           .replace(/(\bnull\b)/g, '<span class="null">$1</span>') // Highlight null
           .replace(/(:)/g, '<span class="punctuation">:</span>') // Highlight colons
           .replace(/([{}\[\],])/g, '<span class="punctuation">$1</span>'); // Highlight brackets and commas
       return json;
   }

   document.getElementById('json-container').innerHTML = syntaxHighlight(jsonData);
</script>

JSON code highlighter - Complete Code


<!DOCTYPE html>
<html lang="en">
   <head>
  
      <style>
         .json .key {color: #ce9178;  /* skyblue for keys */ }
         .json .value {color: blue; /* orange for keys */  }
         .json .string {color: blue; /* Dark blue for strings */}
         .json .number {color: #005cc5; /* Blue for numbers */}
         .json .boolean {color: #FF0000 ; /* Purple for booleans */}
         .json .null {color: #FF0000; /* Red for null */}
         .json .punctuation {color: black; /* Dark gray for punctuation */}
         .json  {
         white-space: pre-wrap;         
         padding: 23px;
         border-radius: 55px;
         overflow-x: auto;         
         
          
         font-size: 13px; 
         line-height: 18px;
         letter-spacing: 0px;
         width: 80%;
         height: 286px;
         }
         pre {color:red;
         font-family: "Courier New";
         background-color: #f5f5f5;        
         
         }
      </style>
   </head>
   <body>
      <h1>Highlighted JSON</h1>
      <pre id="json-container" class="json">
    
    </pre>
      <script>
         // Example JSON data
         const jsonData = {"menu":{
         "header":"SVG Viewer",
         "items": [
         {"id":"tyyyyyrue"},
         {"id":"null", "label": "Open New", "tabel": " New"},
          
         {"id": "ZoomIn", "label": "Zoom In"},
         {"id": "ZoomOut", "label": "Zoom Out"},
         {"id": "OriginalView", "label": "Original View"},
          
         {"id": "Quality"},
         {"id": "Pause"},
         {"id": "Mute"},
          
         {"id": "Find", "label": "67"},
         {"id": "FindAgain", "label": "Find Again"},
         {"id": "Copy"},
         {"id": "CopyAgain", "label": "Copy Again"},
         {"id": "CopySVG", "label": "Copy SVG"},
         {"id": "ViewSVG", "label": "View SVG"},
         {"id": "ViewSource", "label": "View Source"},
         {"id": "SaveAs", "label": "Save As"},
          
         {"id": "Help"},
         {"id": "About", "label": "About Adobe CVG Viewer..."}
         ]
         }};
         
         function syntaxHighlight(json) {
             json = JSON.stringify(json, null, 2); // Format JSON with indentation
             json = json
                 .replace(/&/g, "&amp;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")
                 .replace(/"([^"]+)": \s*"(.*?)"/g, '<span class="key">"$1":</span><span class="value">"$2"</span>') // Highlight strings                 
                 .replace(/(\b\d+\b)/g, '<span class="number">$1</span>') // Highlight numbers
                 .replace(/(\btrue\b|\bfalse\b)/g, '<span class="boolean">$1</span>') // Highlight booleans
                 .replace(/(\bnull\b)/g, '<span class="null">$1</span>') // Highlight null
                 .replace(/(:)/g, '<span class="punctuation">:</span>') // Highlight colons
                 .replace(/([{}\[\],])/g, '<span class="punctuation">$1</span>'); // Highlight brackets and commas
             return json;
         }
         
         document.getElementById('json-container').innerHTML = syntaxHighlight(jsonData);
      </script>
   </body>
</html>

About the author

D Shwari
I'm a professor at National University's Department of Computer Science. My main streams are data science and data analysis. Project management for many computer science-related sectors. Next working project on Al with deep Learning.....

Post a Comment