#1

Obsidian and Markdown newbie here. I’m using Obsidian to take notes for an upcoming IT certification test. The certification involves memorization of terminal commands and their output, so my notes consist of copied examples of syntax and their output. Using blockquotes for this content works reasonably well, as I can use formatting like bold, italics, and highlights to call out specific parts of the example output, but white space is not preserved. Since white space is not preserved, the output doesn’t line up properly. Alternatively, I can use code blocks which preserve the white space, but the tradeoff is that text formatting is ignored. For now, I’m using code blocks because the output lining up is more important than formatting the text.

Are there any options available that will preserve white space while also allowing me to format the text?

#2

What kind of formatting do you need? There’s a third-party plugin that provides syntax highlighting for code blocks that will make it look much nicer, and might be sufficient for your needs.

#3

Most of the time, I just need to bold or italicize parts of the text. The data in the codeblock isn’t a programming language, it’s just output from a network device. The codeblock simply makes it easy to maintain white space. Therefore, I don’t think syntax highlighting is what I need. Sorry, if I’m misunderstanding the suggestion.

I’m attaching a screenshot to illustrate what I’m trying to accomplish. The code block is on the left and the blockquote is on the right. You can see that the whitespace is preserved in the code block, but not in the blockquote. Also, you can see that I bolded the command show platform in the blockquote, but I’m unable to do that in the codeblock as it will be rendered raw (show platform).

obsidian
obsidian1139×476 121 KB

#4

Ah, then your easiest solution is probably to use CSS to specify a monospaced font for blockquotes. Are you comfortable with CSS?

#5

Yes, setting the blockquote to monospace helps with some alignment issues, but additional spaces beyond one space are still ignored. For example, in my screenshot above, the code block on the left has several lines with leading white space. Looking at the blockquote on the right, that same whitespace is not rendered in Preview mode. When in Edit mode, the space is actually there, Preview mode just won’t render it. From the little web design I’ve done, I recall that HTML ignores any additional spaces past one, so you have to insert additional space using " ". Using tricks like that would be time consuming, though.

— Edit —
Adding screenshot to show Edit/Preview mode differences.

blockquote
blockquote1411×539 104 KB

1 Like
#6

Since this is all markdown, markdown allows raw HTML, and you seem somewhat comfortable with HTML, one option is to use HTML elements directly to get what you want.

For example, you could use a <pre> tag to retain both whitespace and styling. If you typed in Obsidian like:

<pre>
This is <strong>one</strong> line

    This line is indented <em>four</em> spaces
</pre>

It will render like:

This is one line

    This line is indented four spaces

Maybe that’s a viable alternative?

The only thing to be aware of is that markdown syntax won’t work inside of HTML. For example, you can’t use ** for bold or * for italics:

<pre>
This is **one** line

    This line is indented *four* spaces
</pre>

is rendered like:

This is **one** line

    This line is indented *four* spaces

Notice that the word “one” is not bold and the word “four” is not italicized. You have to use some HTML tag to get that formatting.

2 Likes
#7

That did the trick! Thanks so much.

2 Likes