2

div#html,div#css,div#js,div#run{
    border:1px solid red;
    height:80px;
    width:80px;
    float:left;
}
div#content{
    clear:both;
    width:400px;
    height:200px;
    border:1px solid black;
}
textarea{
    overflow:auto;
}
<div id='html'>html</div>
<div id='css'>css</div>
<div id='js'>js</div>
<div id='run'>run</div>
<div id='content'>
</div>

The above code snippet contains JavaScript code. When I click Run code snippet, the JavaScript code can't execute; no alert webpage popup. How can I make it run?

0

1 Answer 1

6

Your syntax is off. Your markup is:

<!-- begin snippet: js hide: false -- >

   var  content=document.body.innerHTML;
   alert(content) 

<!-- language: lang-css -->

But the Markdown must contain <!-- language: lang-js --> before the JavaScript segment, eg:

<!-- begin snippet: js hide: false console: true babel: false -- >

<!-- language: lang-js -->

   var  content=document.body.innerHTML;
   alert(content) 

<!-- language: lang-css -->

(note: to avoid problems with the snippet actually trying to render in this answer, in the above code blocks, the -- > at the end of the first line needs to be replaced with -->)

Result:

var  content=document.body.innerHTML;
   alert(content)
div#html,div#css,div#js,div#run{
    border:1px solid red;
    height:80px;
    width:80px;
    float:left;
}
div#content{
    clear:both;
    width:400px;
    height:200px;
    border:1px solid black;
}
textarea{
    overflow:auto;
}
<div id='html'>html</div>
<div id='css'>css</div>
<div id='js'>js</div>
<div id='run'>run</div>
<div id='content'>
</div>

When in doubt, start over by pressing the Snippet button (or Control-M) and pasting in the HTML/CSS/JS again.

enter image description here

Also, it helps to only edit the snippet when inside the snippet editor interface - if you try to edit a snippet's content outside the snippet editor, just in the Markdown, it's a lot harder to manage; these sorts of mistakes are easy to make.

6
  • Does this mean that code fences (e.g. ```js instead of <!-- language: lang-js -->) don't work with code snippets? Sep 30, 2020 at 17:08
  • 2
    That's right, since Stack Snippets are not just plain code blocks; Stack Snippets require their own particular syntax in order to be runnable. Sep 30, 2020 at 17:09
  • Ooh, I wonder if the people implementing highlight.js, those who got code fences working, and the people who implemented snippets work within earshot of each other. Fight! ;) Sep 30, 2020 at 17:14
  • List of allowed language codes. Wouldn't lang-javascript work as well? Sep 30, 2020 at 18:01
  • @PeterMortensen It's not an issue of syntax highlighting, but of Stack Snippet-specific syntax, which determines how stuff that comes after <!-- begin snippet: gets rendered (if it gets rendered at all) Sep 30, 2020 at 19:12
  • +1 for: "edit the snippet when inside the snippet editor interface" ... Oct 14, 2022 at 18:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .