How do I force Stack Snippets to render as a code block?

Question

Usually, posting blocks of code on Stack Exchange websites is very simple:

 You can indent everything by 4 spaces.
 Both lines are indented by 4 spaces.

or

```
You can start and end the code block with 3 backticks.
``` 

However, I have markup of a Stack Snippet which I cannot post the source code for.

• Wrapping in ``` does not work.
• Indenting everything by four spaces does not work either.

Almost ideal output

The following is my ideal output, except that:

• L_ARROW should be replaced by <!--,
• R_ARROW should be replaced by -->

L_ARROW begin snippet: js hide: true console: true babel: false R_ARROW
L_ARROW language: lang-js R_ARROW
 // https://stackoverflow.com/a/45740713/
 // by Joel Harkes https://stackoverflow.com/users/1275832/joel-harkes
 document.getElementById('btn').onclick = function () {
 var copy = function (e) {
 e.preventDefault();
 console.log('copy');
 var text = document.getElementById('txt').value;
 if (e.clipboardData) {
 e.clipboardData.setData('text/plain', text);
 } else if (window.clipboardData) {
 window.clipboardData.setData('Text', text);
 }
 }
 window.addEventListener('copy', copy);
 document.execCommand('copy');
 window.removeEventListener('copy', copy);
 }
L_ARROW language: lang-html R_ARROW
 <button id='btn'>copy</button><br>
 <textarea id='txt'>
 BLAH
 </textarea>
L_ARROW end snippet R_ARROW

Buggy behavior

If you used <!-- and -->, then the block of code usually renders as something like:

<pre>sif2065</pre>

It does not render at all like the desired output.

<pre>sif2065</pre> is only visible in the preview of a post. Once the question is posted, the Stack Snippet is rendered, which is not what I want either.

I just want to display the Markdown of the Stack Snippet as formatted code without it rendering.

Do the tokens <!-- and --> have a higher precedence over code fences, i.e. ```?

The buggy code is pasted below, but you have to open this question for editing to see it as a text string without having the Stack Snippet render.

// https://stackoverflow.com/a/45740713/
// by Joel Harkes https://stackoverflow.com/users/1275832/joel-harkes
document.getElementById('btn').onclick = function () {
 var copy = function (e) {
 e.preventDefault();
 console.log('copy');
 var text = document.getElementById('txt').value;
 if (e.clipboardData) {
 e.clipboardData.setData('text/plain', text);
 } else if (window.clipboardData) {
 window.clipboardData.setData('Text', text);
 }
 }
 window.addEventListener('copy', copy);
 document.execCommand('copy');
 window.removeEventListener('copy', copy);
}
<button id='btn'>copy</button><br>
<textarea id='txt'>
BLAH
</textarea>

• Rob: I was trying: > <!-- begin snippet: js hide: true console: true babel: false --&gt

Answer 1

Stack Snippets are indeed rendering eagerly, even inside code blocks. This original bug report never got an official response and no answer to address workarounds.

Your only choice seems to be using HTML.

Wrap the content of the code block between <pre><code> and </code></pre>, and replace every < in the content of the code block by <. You could also replace every > by > for completeness’ sake, but this is not strictly necessary.

You can also apply syntax highlighting by typing <!-- language: lang-markdown --> or <!-- language: html --> before the code block.

Example Markdown:

<!-- language: html -->
<pre><code>&lt;!-- begin snippet: js hide: true console: true babel: false -->
 
&lt;!-- language: lang-js -->
 // https://stackoverflow.com/a/45740713/
 // by Joel Harkes https://stackoverflow.com/users/1275832/joel-harkes
 document.getElementById('btn').onclick = function () {
 var copy = function (e) {
 e.preventDefault();
 console.log('copy');
 var text = document.getElementById('txt').value;
 if (e.clipboardData) {
 e.clipboardData.setData('text/plain', text);
 } else if (window.clipboardData) {
 window.clipboardData.setData('Text', text);
 }
 }
 window.addEventListener('copy', copy);
 document.execCommand('copy');
 window.removeEventListener('copy', copy);
 }
&lt;!-- language: lang-html -->
 &lt;button id='btn'>copy&lt;/button>&lt;br>
 &lt;textarea id='txt'>
 BLAH
 &lt;/textarea>
&lt;!-- end snippet --></code></pre>

Result:

<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
 // https://stackoverflow.com/a/45740713/
 // by Joel Harkes https://stackoverflow.com/users/1275832/joel-harkes
 document.getElementById('btn').onclick = function () {
 var copy = function (e) {
 e.preventDefault();
 console.log('copy');
 var text = document.getElementById('txt').value;
 if (e.clipboardData) {
 e.clipboardData.setData('text/plain', text);
 } else if (window.clipboardData) {
 window.clipboardData.setData('Text', text);
 }
 }
 window.addEventListener('copy', copy);
 document.execCommand('copy');
 window.removeEventListener('copy', copy);
 }
<!-- language: lang-html -->
 <button id='btn'>copy</button><br>
 <textarea id='txt'>
 BLAH
 </textarea>
<!-- end snippet -->

Answer 2

For simple reference

<pre><code>&lt;!-- begin snippet: js hide: true -->
&lt;!-- language: lang-js -->
&lt;!-- end snippet --></code></pre>

becomes

<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
<!-- end snippet -->