Properly displaying config file names in code blocks

[Mike1924]

Hi Obsidian friends,

What I’m trying to do

I’d like to display config files incl. filename and their file contents in a code block, which would be a handy task for admins.

Things I have tried

As long as the config filename does not contain a file extension (separated by a dot), this already works out of the box with Obsidian core. As we can see in the following screenshot, the filename /etc/ssh/sshd_config is displayed properly:

However, this does not work if the filename contains an extension, since the file extension gets cut off, In this particular case etc/sysctl.conf becomes /etc/sysctl without the .conf extension:

I do understand I’m misusing the code block feature for something (using config filenames instead of programming languages as a title) it’s not supposed to be used for. This would a great feature anyway. I’m writing the filename above or below the code block as a workaround, although this is not ideal.

How do you guys display configfiles in Obsidian?

Best Regards
Mike

[Pch]

You could take a look at the plugin Shiki Highlighter … One of its feature is displaying a title for a code block. Maybe that could help

[Mike1924]

Thanks for your reply.

Unfortunately Shiki Highlighter makes code blocks look entirely different. I’d prefer a native solution (if any).

[bleish]

Unfortunately, I don’t believe there’s a way to natively achieve this. One trick I’ve used is to nest the code block inside of a Callout. Something like:

> [!EXAMPLE] app.component.ts
> ```ts
> private readonly httpStatusCode = signal(200);
> private readonly teapot = effect(() => {
>   if (httpStatusCode() && httpStatusCode() === 418) {
>     console.log("I'm a teapot"));
>   }
> });
> ```

Which then gets rendered as:

It’s not optimal, but it gives something to go off of.

Alternatively, you could check out the Code Styler plugin. You can customize a lot about the code block, like adding the file name.

[holroy]

It’s still a plugin, but I’ve found the Code Styler plugin to be an interesting option when I want to some extra embellishment for a code block. It doesn’t need to do anything beside the native look, but it do allow for a lot of different styling if you want to. Most notably by adding title:/etc/ssh/sshd/config.cong it’ll add a title to your code block

So your example could look like:

``` title:/etc/sysctl.conf
line 1
line 2
line 3
```

Which displays as:

See GitHub - mayurankv/Obsidian-Code-Styler: A plugin for Obsidian.md for styling codeblocks and inline code
for more information on the plugin. I’ll just mention that you can highlight lines, mark the active line, and similar to enhance the display of your configuration file in the context of explaining what happens.

Update: HeHe… Didn’t notice that bleish had also posted regarding the Code Styler plugin… I marked this post for answering some time ago…