6

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>
  • I was trying: > &lt;!-- begin snippet: js hide: true console: true babel: false --&gt; – Rob Dec 31 '20 at 4:00
5

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 &lt;. You could also replace every > by &gt; 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 -->

You must log in to answer this question.

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