6

I'm trying add a "stack snippet starter pack" for tag wikis for specific libraries so there's a ready-to-go template when adding a tag that a user (or answerer) could copy and paste into their question. In particular, this is occurring on the tag for

However, the markdown is rendering odd and eagerly evaluating the snippet syntax even though it's been indented four spaces over as code.

For example, the following code should display a stack snippet that could be pasted into an answer:

Here's a live snippet - it should be working, but isn't

    $(function() {
        $('.multiselect').multiselect();
    });
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

    <select class="multiselect" multiple="multiple">
        <option value="cheese">    Cheese     </option>
        <option value="tomatoes">  Tomatoes   </option>
        <option value="mozarella"> Mozzarella </option>
        <option value="mushrooms"> Mushrooms  </option>
        <option value="pepperoni"> Pepperoni  </option>
        <option value="onions">    Onions     </option>
    </select>

Here's the actual code - only got there by escaping manually

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

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

        $(function() {
            $('.multiselect').multiselect();
        });

    <!-- language: lang-html -->

        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"/>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
        <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

        <select class="multiselect" multiple="multiple">
            <option value="cheese">    Cheese     </option>
            <option value="tomatoes">  Tomatoes   </option>
            <option value="mozarella"> Mozzarella </option>
            <option value="mushrooms"> Mushrooms  </option>
            <option value="pepperoni"> Pepperoni  </option>
            <option value="onions">    Onions     </option>
        </select>

    <!-- end snippet -->

I know that previews aren't always a faithful reproduction of how it will actually be rendered, but in this case the preview is the best option and Meta and the Tag Wiki's are much worse.

Here's a picture representation of the issue:

screenshot

Here's a reproduction of this issue in the formatting sandbox

1

0

You must log in to answer this question.

Browse other questions tagged .