How to display a script tag with json content in a code block in html?

Question

I want to display a chunk of code generated dynamically inside a code example block that users can highlight a copy.

The content will change based on user input so it cannot be hardcoded.

This is an example of the content I would like to display inside the block:

<script type="application/ld+json">{
  "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
  "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
  "version": "1",
  "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
  "license": ""
}</script>

I'm using VueJS and this is the method in progress:

makeScript(){
  var str = JSON.stringify(this.metadata, null, 2);
  var script=document.createElement('script');
  script.type='application/ld+json';
  script.text = str;
  this.result = script;
  document.getElementById("resultCode").appendChild(script);
},

I've tried "code" and "pre" and all it shows is nothing but the script is there. I think the script is getting compiled and not shown as text, I could be wrong.... I hope that makes sense.

output goes here:

<div class="form-group">
  <pre >
    <code id="resultCode">
    </code>
  </pre>
</div>

This seems to work: jsfiddle.net/khrismuc/z7j1n2ok

user5734311
– user5734311

2018-11-07 22:12:04 +00:00
Commented Nov 7, 2018 at 22:12 — user5734311
– user5734311, Commented Nov 7, 2018 at 22:12
Yes, that worked! Thank you @ChrisG

Marco Cano
– Marco Cano

2018-11-07 22:18:57 +00:00
Commented Nov 7, 2018 at 22:18 — Marco Cano
– Marco Cano, Commented Nov 7, 2018 at 22:18

tony19 · Accepted Answer · 2022-07-15 22:27:53Z

This can be done with string interpolation in a Vue template.

Add a data property (e.g., named "code") to your component.
```
   data() {
     return {
       code: ''
     }
   }
```

Edit your template to interpolate that data property:

 <div class="form-group">
   <pre>
     <code id="resultCode">
       {{code}}
     </code>
   </pre>
 </div>

Set the data property to the desired raw HTML (i.e., the <script> block you mentioned in question):

   methods: {
     setCode() {
       this.code = `
       <script type="application/ld+json">{
         "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
         "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
         "version": "1",
         "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
         "license": ""
       }<\/script>
       `; // Must escape closing script tag
     }
   }

Note this method requires escaping the closing <script> tag to avoid a syntax error.

new Vue({
  el: '#app',
  data: () => ({
    code: '',
  }),
  mounted() {
    this.setCode();
  },
  methods: {
    setCode() {
      this.code = `<script type="application/ld+json">{
  "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
  "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
  "version": "1",
  "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
  "license": ""
}<\/script>`;
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <div class="form-group">
    <pre><code>{{code}}</code></pre>
  </div>
</div>

The Guy with The Hat · Accepted Answer · 2018-11-07 22:22:15Z

Construct the script element.
Put it in a new, temporary element.
Put the innerHTML of the temp element into a text node.
Put that text node into the output element.

function makeScript() {
  metadata = {
    "name": "PBOV1 Is a Human De Novo Gene with Tumor-Specific Expression That Is Associated with a Positive Clinical Outcome of Cancer",
    "keywords": "pbov1, tumor-specific, cancer, Cancer, Evolutionary Biology, Immunology",
    "version": "1",
    "url": "https://figshare.com/articles/PBOV1_Is_a_Human_De_Novo_Gene_with_Tumor_Specific_Expression_That_Is_Associated_with_a_Positive_Clinical_Outcome_of_Cancer__/156778",
    "license": ""
  }
  var str = JSON.stringify(metadata, null, 2);
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.text = str;
  
  p = document.createElement('div');
  p.appendChild(script);
  text = document.createTextNode(p.innerHTML);
  
  document.getElementById("resultCode").appendChild(text);
}

makeScript();

<div class="form-group">
  <pre><code id="resultCode"></code></pre>
</div>

Collectives™ on Stack Overflow

How to display a script tag with json content in a code block in html?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related