How to show JSON as Code in html and what are CSS?

Question

I want to display Response and Request pattern of API in API Reference Guide. In the pattern, I want to show JSON in the "code" tag and properly styled

I have tried and used 'pre' tags and enclosed around it. styled with 'white-space' attributes. The problem is that "It is displaying as it is(literally means the long spaces used for indentation that exists in html code editor. it is problematic when we this 'code' tag in very nested html elements) in html "code" while using pre-wrap

{"username":"user","password":"12345"}

Above mentioned code should show following way.

{
    "username":"user",
    "password":"12345"
}

And additional details of my problem can get from following pen https://codepen.io/chaikishu/pen/XogomL

Could you please provide some code so we are better able to help you (HTML, CSS and whatever else might be relevant)? Thank you very much in advance. — pklaschka, Dec 25 '18 at 14:08
Please check these ways it may help: https://www.taniarascia.com/adding-syntax-highlighting-to-code-snippets/ — M.suleman Khan, Dec 25 '18 at 14:11
Possible duplicate of [How can I pretty-print JSON using JavaScript?](https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript) — t.niese, Dec 25 '18 at 14:18
Possible duplicate of [Display JSON as HTML](https://stackoverflow.com/questions/883977/display-json-as-html) — Stack Overflow, Dec 25 '18 at 18:14

score 1 · Answer 1 · answered Dec 25 '18 at 14:32

1

If you’re going to put code into your pages frequently, I recommend a JS library to handle this. I use Prism.js https://prismjs.com/ This library handles a huge list of languages, and provides syntax highlighting out of the box.

Whatever you decide to do, just using pre alone is not semantically correct. You need pre and code like this:

<pre><code>{ “username”: ”user” }</code></pre>

Review the specifications for each: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

The pre element handles spacing, the code element handles the code. Together they provide you with what you’re looking for.

answered Dec 25 '18 at 14:32

Vaughn D. Taylor

617
1
8
20

I want the demo code with neat spaces as I mentioned in Question. If possible can you show an example. – Chaitanya Kishore Kandhimalla Dec 25 '18 at 14:56
Try the code I provided you above but add your spaces. The pre tag should handle any spacing you add. – Vaughn D. Taylor Dec 25 '18 at 15:25
I'm not sure why think this is a ridiculous answer? I've given you the proper way to format your code as well as a recommendation for library you can use in the event that this is something you do regularly. As far as the spacing goes, that's really up to you. Whatever spacing you put within your code will render as such. Was there something about my answer that was incorrect? I'm trying to help you. – Vaughn D. Taylor Dec 25 '18 at 20:28
It's as simple as this: https://codepen.io/vaughndtaylor/pen/vvZWwX The purpose of using Prism.js, as I said to to get syntax highlighting for whatever language you happen to be using. But if you don't need it, don't use it. I was just giving you options. – Vaughn D. Taylor Dec 25 '18 at 20:35
First of all, I'm sorry! I'm frustrated at that problem. At that moment i have crossed my cool. Yeah it's working as you mentioned. but when I deep nested `` element it is also rendering the spaces that exists before code element – Chaitanya Kishore Kandhimalla Dec 26 '18 at 02:34
I’ve updated my code https://codepen.io/vaughndtaylor/pen/vvZWwX I removed space between element tags and before and after my content. I cannot see what you’re working on but I can only assume you’re asking about spaces before the opening curly bracket? Remember that the pre element’s purpose is to render spacing. – Vaughn D. Taylor Dec 26 '18 at 06:40
Also, as a courtesy to the community, you need to remember that nobody is getting paid to answer your questions. So when someone spends the time to thoughtfully address your questions, don’t become abusive. We’re here to help but you need to also help yourself by trying the suggestions and working through the issues. – Vaughn D. Taylor Dec 26 '18 at 07:01
Sure I obey these things. I described my problem clearly in this pen https://codepen.io/chaikishu/pen/XogomL – Chaitanya Kishore Kandhimalla Dec 26 '18 at 09:57
Have at look at my fork - https://codepen.io/vaughndtaylor/pen/PXjrzP What you’re missing is that pre will render all spacing as mono space. Please also refer to the spec again: “The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written.” I think you’re trying to maintain your nested indentation, but in this case you cannot maintain that indentation because pre will render it. The pre tag must be outdented. – Vaughn D. Taylor Dec 26 '18 at 14:27

score 1 · Accepted Answer · answered Dec 28 '18 at 05:59

I have understood that your problem of Outdenting JSON code in HTML <code> tag when deeply nested in HTML document(like you mentioned in codepen).

This is your HTML Code

 <div>
   <div><!-- Some Code --></div>
   <div>
     <div><!-- Some Code --></div>
     <div>
       <div><!-- Some Code --></div>
       <div>
         <div class="code">
           <pre>
            <code>
              {
                  "email": "string",
                  "password": "string"
              }
            </code>
            </pre>
         </div>
     </div>
   </div>
 </div>

After rendering

              {
                  "email": "string",
                  "password": "string"
              }

So, This issue can be solved by adding some javascript to your code in the following way. caution: only use when all the code tags have JSON. Otherwise, you have to modify according to the desired output.

  var all_codes = document.getElementsByTagName('code').length;

  for(var i=0;i<all_codes;i++){
      var code_json = document.getElementsByTagName('code')[i].innerHTML;
      console.log(code_json);
      document.getElementsByTagName('code')[i].innerHTML = JSON.stringify(JSON.parse(code_json),null,5);
  }

I have this solves your problem.

If you made mistake at any JSON code like missing quote or colon or comma then your formatting will not be rendered by the browser and you get an error in the console — Himavan, Dec 28 '18 at 07:58

How to show JSON as Code in html and what are CSS?

2 Answers2