Indentation of a whole paragraph

[Sisyphus21]

I wanted to indent a whole paragraph. How do I do that?
this is the para:

while loops: These are useful to repeat a code block an unknown number of times until some condition is met. For example:

[ScottKillen]

Add two spaces to the beginning of the text.

[Sisyphus21]

It doesnt show any changes to the reading view tho

[LondoMollari]

I would find this useful. If anyone has some CSS they could share that makes this work easily?

[holroy]

The paragraph you showed as an example is a definition for a while loop, and as such could use some special markup, more on that later.

In general in markdown there is no way to just indent a paragraph, so it often comes down to the intention of the indentation as to what alternative one chooses. One case is when it’s a quotation where it’s natural to prefix the lines with >. Another case would be a highlight of some sort, where usually one also would use block quotes, or possibly some variant using the highlight markup. Another tool to use is list markup, which usually are indented paragraphs.

The pure indentation of a paragraph is kind of against the markdown philosophy of having it to be more of a logical markup language, rather than a visual markup language. This has led to multiple variant of how to do visual stuff in various incantations of markdown. Using CSS in addition to markdown can get you some of the way, but this would require a plugin (or some use of HTML), and some special markup.

Another option, as I hinted to at the start, is using a definition list. Currently this is not supported in Obsidian, but it’s supported in some variants of markdown. See this feature request: Add support for Definition Lists

One variant which could take you some of the way with currently implemented stuff are alternative checkboxes, or decorated tasks as I like to call them:

Alternative Checkboxes (Icon Bullets) - Copy and paste

I’ve used these, and extended with even a couple more of my own, and I’ll post a little reference as to how I go about when adding more alternatives to this impressive list. But first I wanted to show two queries I use to collate my alternative checkboxes from all around my vault. List all checkboxes of a given type ```dataview TASK WHERE status="?" ``` Where you can change the "?" to match whatever checkbox type you want to see. List all checkboxes for a list of types ```dataview TASK WHE…

Using stuff like above one could envision doing something like:

- [=] (term:: `while` loops)  – These are useful to repeat a code block an unknown number of times until some conditions are met.

And with a little CSS this could display as:

Here I’ve added some extra inline field definitions, which would allow for later queries on tasks with status = "=" to list all defined term’s, and show them in various formats. If kept as a task query, it would even allow for linking back to where it was defined.

Since this already are using a list/task format this can also be used for the indentation of the paragraph either way you want it. If one is so inclined you could also use similar markup for a pure indentation of the paragraph, with something like:

- [0] Just the indentation...

And then have that alternative checkbox contain CSS to indent the paragraph, but not show the list markers, and so on. At this point you could however also use one of the plugins to allow for adding CSS classes to your paragraph.

CSS to accommodate for the '=' variant

I’m using the minimal theme, but the following should be able to used in a standalone CSS snippet:

input[data-task="="]:checked,
li[data-task="="] > input:checked,
li[data-task="="] > p > input:checked {
{
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  pointer-events: none;
  color: var(--color-green);
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
}

/* = - a definition term/task, remixicon: git-repository-fill, and text-indent */
input[data-task="="]:checked,
li[data-task="="] > input:checked,
li[data-task="="] > p > input:checked {
  margin-left: -30px; 
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM7 19V17H13V19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7ZM7 5V7H9V5H7ZM7 8V10H9V8H7ZM7 11V13H9V11H7Z'%3E%3C/path%3E%3C/svg%3E");
}

I’ve used an icon from remixicon, but other icon libraries can also be used, with similar syntax. I’ve not done any fancy indentation stuff here, just a slightly reduced indentation related to other list/task stuff.

But the markup would allow for a larger variation of formatting and indentation to applied if one would want to do that.