Basic Formatting Tests

Regular text paragraphs look like this. Just a plain text, simple text, no surprises, no special treatment, no thingamajigs, no fucky-wucky, no nuthin. You should know that after this sentence ends there will be a SINGLE linebreak.
You should also know that after THIS sentece end there will be TWO FUCKING LINEBREAKS HOLY SHIT.

It seems we’ve survived the second linebreak. Paragraphs are weird. Paragraph is <p> but a linebreak is <br>. Let’s see how an indent works:
indent one
indent two
Well did it do anything? Nope, I guess it didn’t.

Let’s see how a LIST will function:

• Unordered listt looks like this shit
  • And it can have indentations!
    • and MORE indentations
      • and even MORE indentations
        • Guess it stops at square
• All in all;
• Good stuff;
  Don’t forget to double-linebreak after list ends…

Because if you don’t then it gets kinda merged into the last list item. Weird. Okay now for ordered list:

1. First list item;
   1. deeper list item. Weird, I thought it would get numbered progressively?
      1. Nope, guess it doesn’t
2. Well Im sure I can change that somewhere;
3. If I ever wanted to;

Can also do lists like this:

• With + signs
• and checkmarks!
• and empty checkmarks!

How do Headings work and look?

Second Heading

Third Heading

Fourth Heading

Fifth Heading

All the way up to 5th heading we get counting!

Sixth Heading

####### No more heading after sixth.

Linkage

Links! A link to another page on the site will look like this and must be invoked like this: [show text](link-to-page-in-obsidian).
Link to an outside site will look like this so really the same. [show text](https://www.youtube.com/@KronuginDev)
How about links to specific page paragraphs: Admonitions, formatted like [Admonitions](/technical/site-tests/#admonitions) so needs a full link from content.

Inline Effects

Lets go over some inline effects that we have

Classic Inlines

Classic stuff that .md is designed for:

• The *italic* or _italic_ results in: ITALIC text and <em> tag;
• The **bold** or __bold__ results in: BOLD text and <strong> tag;
• The ~~strikethrough~~ results in: STRIKETHROUGH text and <del> tag;
• The ==highlight== results in HIGHLIGHTED text and <mark> tag;
• The ++insert++ results in INSERTED text and <ins> tag;
• The <kbd> tag isn’t markdown-available, so Write it manually.
• The `code` results in code strip but be wary not to nest them because they WILL split;
• • <sup>The ^sup^ results in SUPERSCRIPT text and ^tag;
• <sub>The ~sub~ results in SUBSCRIPT text and _tag;

That’s in for classic inlines until I find more. Sometimes to make some “inline” or “style” symbol appear you neet to add a \ before it so that markdownify doesn’t pick it up. Can’t write these: ` or * these without a \ before them.

Do these work in headings? YES

They will work in other elements like p, h1, h2, h3, h4, h5, h6, li, div, blockquote, ul, ol, pre, table, section, article, aside, header, footer, figure, figcaption, tr, thead, tbody or at the very list they SHOULD!

Custom Inlines (which means its mine)

Here come inline effects that I’ve added for this site:

• (The (+parens+) will result in diminished text in parens and <tf-parens> tag. Kinda fragile. Be careful;). Don’t mistake with regular (parens);
• The °°pop°° will result in POP text and <tf-pop> tag;
• The ªªaccentªª will result in ACCENT text and <tf-accent> tag;
• The ¡¡flip¡¡ will result in FLIPPED text and <tf-flip> tag. But it works on full-block text, doesn’t wrap around. Use sparingly;

Do these work in headings? YES

They will work in other elements like p, h1, h2, h3, h4, h5, h6, li, div, blockquote, ul, ol, pre, table, section, article, aside, header, footer, figure, figcaption, tr, thead, tbody or at the very list they SHOULD!

Inline Interactions and (Quirks)

That’s all of the custom inlines from the render-inline.html. They can interact with each other and SHOULD interact in any order, like:

• Pop begins, accent starts, (parens start and end,) accent ends, pop ends.. Unspecified params are inherited properly;
• (parens start, accent starts, pop starts and end, accent ends,parens end.)
• Pop will propery wrap around inner pop by which I mean it will invert;
• Parens will (I hope) interact with any classical outer inline;
  • (Parens will not nest (simple parens) properly inside.). And they will break entirely btw.
  • ( Parens will not wrap properly (+around inner parens), because they aren’t symmetrical.+);
  • (Tf-parens will properly work with (regular parens) even if they are (asymmetrical))).
  • (TF-parens will break if (regular parens) are )unsymmetrical);
  • (Tf-parens will properly work despite (+inner parens) but with inner parens a + will not be consumed+).
  • (Tf-parens will break apart (+when using) ( asymmetrical tf-parens).
  • I wonder if (assymetrical parens)) will break other effects? Nope.

That’s all to know about quirks.

Bigger Formatting

All of the stuff that’s a bit MORE than just inline text effects.

Classic Formatting Insertions

Here are some of the classics, present in markdown:

Code and Codeblocks

You know about the <code> tag but there is also a <blockquote> which is summoned with three ``` next to each other, like this:

public string expleen = "This is a blockquote, but actually...";
// turns out that it isn't a blockquote
// it's a <tabindex> with <code class="language-csharp" data-lang="csharp">
// weird
// language can be specified like ``` csharp when opening

If you don’t specify the language then it defaults to something like this:

Code block without language
Should probably style this bitch
Results in <pre tabindex="0">, whatever that means.

No twin linebreaks needed cause this shit is wrapped in its own <p> anyway. I don’t know a full list of languages this bitch supports, but I know that python, csharp, work. Maybe well find more.

def hello():
	print("world")   #comment

The above is for python, and it seems that they are formatted the same. Weird.

If this text shifts upon hoverThen the fucking shortcode got consumed and rendered. fuck

Yeeeeah this shouldn’t have rendered into a shifter. But it did. The proper way to display hugo code in codelinks is to comment the fuck out of them, like this:

{{/*< shifter type="hover" >*/}}
If this text shifts upon hover
░
Then the fucking shortcode got consumed and rendered. fuck
{{/*< /shifter >*/}}

Yeah, not it fucking works.

Footnotes

Footnotes!¹ Get rendered like this and produce <fnref:1> tag. Neat! They will create a footnote at the bottom of the page. The full code a footnote generates looks like this:

<sup id="fnref:1">
	<a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a>
</sup>

Then, at the bottom there will be a footnote text with a ‘symbol’ button pointing you back to the source of the footnote¹.

Quote Blocks

Quotes are invoked by using > or >> for indents within quoteblocks. In practice they will look like this:

Quote starts here with one indent. Now I write enough text to see how it wraps to the second line. All good. All must be well. Do inlines work? Do custom inlines work? And hoverbower? Will a code strip work? Footnote?¹ Okay now moving on to the second indent:

Second indent is here

Will the third indent work? Yes!
Now go back to second indent. Oh. I guess we DON’T. Quote Indent’s don’t go back down

Need to use double linebreak to escape the deeper indent.
And this is weird, it still gets highlighted as quote in obsidian over here.

A double linebreak helps end the quote for good.

Hermit-V2 Specific Formatting

Some extra neat stuff added in Hermit-V2.

Admonitions

Admonitions are like these neat hugo shortcodes that create a colored, distinct and visual block that warns you of something. Invoked like:

{{/*< admonition tip "This is a tip" >*/}}
A **tip** banner
{{/*< /admonition >*/}}

or

{{/*< admonition type=summary title="This is a Summary headline" >*/}}
Details for the summary can be entered here
{{/*< /admonition >*/}}

Admonitions that I know of are: note, info, tip, success, warning, failure, danger, bug, summary. I’ll try to add some more but I dono how that will go. When rendered, an admonition looks like this:

Custom admonitions:

Custom Added Formatting (which means its mine)

All of the custom big stuff, added in form of shortcodes or… whatever.

Shapeshifter Text

Hidden, concealed text which hides behind other text that can be revealed due to several conditions. It is called like hover:swaps░wsaps but encased in double ¿ signs. It has several variations:

1. On hovering with cursor: MARCOPOLO
2. On clicking with mouse: MARCOPOLOFUCKO ( more than 2 args allowed)
3. On scrolling past middle of page: MARCOPOLO
4. On odd/even date: ODDEVEN
5. On page refresh (random): MARCOPOLOFUCKO ( more than 2 args allowed)

How does it interact with the rest?

1. Classic inline: MARCOPOLO
2. Custom inline: MARCOPOLO
3. Inside code blocks: MARCOPOLO
4. Inside footers²
5. Inside hovering text note. Actually it breaks apart entirely.

Should work in most classical scenarios but don’t fucking overdo it.
Bigger shapeshifter paragraphs should be possible:
But I wonder if they will?On the other hand shortcodes will probably not work.
Will work? Probably.
<p> paragraphs don’t work inside shifter segments. Only single linebreaks <br> will do.

Sidenotes

When you hover over a text, a JS script will insert a popup hovernote above the cursor. It should behave properly constrained to the page boundarise but WHO KNOWS. Works like this:

{{/*<sidenote text="popup text">*/}}hover note{{/*</sidenote>*/}}

And results in THIS. The sidenotes do not accept any inline INTERACTIONS by default, which is fine because this is supposed to be kindasorta lightweight and rare.
Also, they are now rendered to the left of the main column when the window is wide enough! There is even a no-js fallback which just renders sidenotes in a static list! You can use the button to scroll to the related piece of text (which isnt ideal of course but better than nothing!).

Symbols

Custom svg letter-like symbols can be invoked with :symbol: but will not :work: unless matched with a specific symbol, like . Can also be invoked with {{/*<sym crown>*/}} shortcode. Will work in almost any scenario except in a hover note.

Inclusions, Media

This section will explore different media insertion methods, pictures, video, whatever.

Images and Figures

Invoking an image like ![](../../static/ob/featuredImg-default.jpg) results in:

Images can be put in the common ob folder or be located in the post’s specific folder, invoked like this ![](site-tests/akshually.jpg), so by referencing the page folder shorthand, resulting in:

But that’s not all, there is also some kind of a <figure> shorthand that allows to adjust the image and add params to how it is displayed. Let’s try something.

{{/*< 
figure src="/technical/site-tests/akshually.jpg" 
alt="image"
title="image title is showed in h4" 
caption="caption is shown like this bitch" 
class="middle" 
>*/}}

Produces an image in the format of:

{{/*< 
figure src="/technical/site-tests/akshually.jpg" 
alt="image"
title="akshually cat left"
caption="akshually cat" 
class="left"
width=128
>*/}}

Produces an image in the format of:

But atops after a double linebreak, or in other words a <p> ends this. Other elements like quoteblocks and lists will escape it too.

Youtube videos

Youtube videos can, of course, be inserted like any other link https://youtu.be/K3-NveCxrjE?si=S9_qkGrmgro8OTz1 or hidden under a word. But ALSO, it can be embedded into the page DIRECTLY with a shortcode {{/*<youtube K3-NveCxrjE>*/}} like:

{{/*< youtube 
id=K3-NveCxrjE 
start=30 
end=60 
loading=lazy
mute=true
controls=false

>*/}}

Ending

That should be it, but of course it’s not going to be it.