Shell prompts & Title bars in code blocks

[ianmuchina]

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.

$ some command

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
• Unslectable

// 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.

[piharpi]

Hi... 👋️ @ianmuchina, jekyll-klise using kramdown for processing markdown files, it has a feature called IAL you can pass anythings HTML attributes, for example

```ruby
def what?
  42
end
```
{: data-label="home/documents/test.rb"}

Result:

You can select all the attributes via CSS using selector attribute([data-label]) and adding ::before/::after pseudo-element, give property content: attr(label-data).

I think will solve the problems, I still open the issue may some people have a better solution.

Feel free to check:

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr
• https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
• https://kramdown.gettalong.org/syntax.html#language-of-code-blocks

[ianmuchina]

CSS generated content is not selectable so I ended up adding html before code blocks

<div><code id="label"><span>Title</span></code></div>

For the prompts, I used the console language which I think gives the prompts a different css class, I don't know.

Links

• Sample post
• Is it possible to select css generated content??
• Code for the console lexer