1. Shell prompt
When sharing code blocks, I want to make it easy for the reader to know wether it is a snippet or, a Terminal command. Adding a $ sign works okay.
Making the $ unselectable would make copying commands easier.
2. Top Bar
Having a title bar with a label adds context for readers. It also makes skimming through a long post easy .
Solution
I've made a quick and dirty solution in html and css. You can find it here
Title Bar
To add a title bar, I add html content and give it the window-bar
class
<div class="window-bar"><code><span">Window Title</span></code></div>
Then I add a code snippet in markown with the '`' below the element
Shell prompt
For this I use html
<div class="window-bar"><code><span class="unselectable" id="">Terminal</span></code></div>
<pre class="highlight"><code><span class="unselectable" id="root">$ </span>vim /etc/config.json</code></pre>
CSS
In syntax.scss I added this:
// Window-bar
.window-bar {
color: #ffffff;
background-color: #202127;
margin: 0 -27px;
@include media-query($on-mobile) {
margin: 0 calc(50% - 50vw);
}
text-align: center;
border-radius: 8px 8px 0px 0px;
padding: 0px;
display: block;
overflow-x: auto;
}
// Unselectable
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Links
Digital ocean custom markdown processor with some good features all in markdown.
Blog post I found adressing this
I don't know how to write or extend a markdown processor so that's the best solution I could come up with. One that requires no html to write a post would be great.
Thanks.