Displaying code on the main panel

[Eldenbraz]

Hello everyone,

Currently building a doc, I'd like to put the code that appears on the right side panel under my main text, and display the output of the code on said panel.
Ubble did it successfully, I wonder how, and if it's possible to get a side-panel code section.

Thanks for any help!

[MasterOdin]

It looks like they have added a <div class="center-column"></div> element before any code block they want centered, and then added a CSS rule to screen.scss:

.content .center-column+pre {
    position: static;
    float: none;
    clear: none;
    width: 60%;
    margin: 0 28px;
    left: 0;
}

this then take precedence over the regular .content pre that the code blocks on the right side use, which have float: right set.

This is what the HTML for a centered element looks like:

<div class="center-column"></div>
<pre class="highlight swift tab-swift">
    <code>
        <span class="kt">UIApplication</span><span class="o">.</span><span class="n">shared</span><span class="o">.</span><span class="nf">open</span><span class="p">(</span><span class="n">identificationUrl</span><span class="p">,</span> <span class="nv">options</span><span class="p">:</span> <span class="p">[:])</span>
    </code>
</pre>

You can insert the center-column div as-is into the markdown and it'll get parsed through.