Creating a command-line formatted code block

Plugins ideas
1

Use case or problem

Hi,

I have spent a bit of time looking into this as a possible idea to integrate into Obsidian after trying to find a workaround on my own.

I am trying to create code blocks that automatically format as if they relate to the command line/shell interface. This is distinct from bash syntax and requires some extra formatting.

The first thing I did was see how Obsidian creates code blocks and saw that it uses PrismJS. I went to check the PrismJS website and found the perfect plugin to do exactly what I want which is something that looks like this:

[chris@remotehost] $ pwd
/usr/home/chris/bin
[chris@remotehost] $ ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

I found this link and tried the solution there as well as trying a CSS snippet since PrismJS provides both JS and CSS. The issue is that it expects to be in a <code><pre> HTML block. I played around with this in Obsidian and had no luck and then tried to amend the CSS file to use the Obsidian div and class names “HyperMD-codeblock” but that didn’t seem to work either

Proposed solution

Ideally, we could have a method of transferring Prism plugins directly so that any future uses could be covered.

In the particular case of the feature I’m asking for, I would like to be able to write something like:

```command-line data-user=“chris” data-host=“remotehost” data-output=“2, 4-8”
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr–r-x 45 chris chris 92 Feb 14 11:10 …
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy
```
And have the code block format including support for the various other parameters as described in the Prism documentation.

Related feature requests (optional)

1 Like
2

Upon further investigation I’ve realised I was using the Edit mode HTML tags when attempting to edit CSS whereas in Reading View this code block is:

<div><pre class="language-command-line" tabindex="0"><code class="language-command-line is-loaded">echo $test
output of test
echo $test2
output of test2
</code><button class="copy-code-button">Copy</button></pre></div>

Which matches what PrismJS was expecting. I’ll keep playing and post if I get a workaround

1 Like
3

Okay so after looking at it a bit more, I realised I was using the plugin code wrong, it’s not an option to use the JS or CSS, it’s both.

The solution is still far from ideal and would be good to get a more embedded way of doing this with Obsidian formatting but for now:

  • Use the post linked to install the JS Init plugin to Obsidian
  • Go to Download â–˛ Prism
  • Choose a theme (preview at bottom)
  • Choose languages (for me I pretty much just wanted Bash and PowerShell but you can also select SQL and other command interface languages or even just Select All)
  • Hit “Download CSS” and put prism.css in your .obsidian/snippets directory
  • Copy the JS and place it in the JS Init plugin setting page in Obsidian. I would recommend downloading and keeping the JS so you have it for reference
  • In your MD file, when you would like to write a command interface as shown by the plugin, use HTML syntax as described in the plugin webpage e.g.
<pre class="command-line language-bash"
	 data-user="john"
	 data-host="localhost"
	 data-output="2,4">
<code>cat obsidian.txt
Obsidian is a great note taking app
ls
index.html obsidian.txt</code>
</pre>

In order to get the desired output which looks like:
image

My proposed syntax for Obsidian if this were added as a plugin or core feature would be:
[open three backticks]command-line, user:“john”, host:“localhost”, output:“2,4”
cat obsidian.txt
Obsidian is a great note taking app
ls
index.html obsidian.txt
[close three backticks]

2 Likes
4

(continuation of reply)
where command-line determines that we are using this syntax instead of a normal language. Split off everything after command-line- and take bash as the syntax highlighting. Then break through the comma separated parameters using colons or equals and quotations for the input and format it as the above HTML.

I haven’t got time at the moment to think about coding it as a proper community plugin but if anyone else wants to, feel free. If I ever get round to it I’ll post a reply here.

Also a note, if you think it looks funny press Ctrl+E / Go into preview mode and make sure you’re looking at it rendered properly or Run the JS Init module to ensure it’s all working.

You can also use your own theme instead of the font and colours of the CSS if you remove everything before the first occurrence of .command-line-prompt

1 Like
5

First of all, thanks for your contribution! I will try it when I find some time.

I would love seeing this as a native feature too. It’s great to see someone else having the same concern, for my work I add screenshots of commands every day and it’s a pain having to add a picture + command block for easy copy-pasting (and syntax highlighting doesn’t look properly there!!)

Hope this reaches whoever needs to.