Styleguide _test

Cat ipsum dolor sit amet, always hungry. Poop on grasses i show my fluffy belly ^{but it's a trap!} if you pet it i will tear up your hand and sniff sniff sniff sniff but step on your keyboard while you're gaming and then turn in a circle but human is washing you why halp oh the horror flee scratch hiss bite hell is other people.

H2

H3

H4

H5

H6

Custom Header ID

Elements

Text

Number one. Steady hand. One day, yakuza boss need new heart. I do operation. But mistake oopsie! Yakuza boss vanquished die! Yakuza very angr mad! I hide fishing boat, come to America. No English, no food, no money. Darryl give me job. Now I have house, American car and new woman. Darryl save life.

My big secret. I kill yakuza boss on purpose. I good surgeon. The best!

Lists

Unordered

Fruits:

• Apples
• Bananas
• Coconuts
• Doughnuts
• Oranges

Unordered lists, also known as bullet lists, are a useful way to present information in a structured and easily scannable manner. Here are some reasons why unordered lists are beneficial:

• Visual clarity: Unordered lists provide a clear visual representation of individual items or points. Each item is typically preceded by a bullet point or another marker, making it easy for readers to identify separate elements.

• Simplified organization: Lists help organize information into concise and manageable chunks. They allow for the categorization of related ideas or items, enabling readers to quickly grasp the main points or components being presented.

• Readability and comprehension: By breaking down complex information into bullet points, unordered lists enhance readability and comprehension. Readers can scan the list and focus on specific items of interest without getting overwhelmed by lengthy paragraphs.

• Prioritization and emphasis: Lists enable the author to prioritize items by placing them at the beginning or end of the list, or by using formatting techniques such as bold or italics. This helps draw attention to important details and ensures that key points are not overlooked.

• Sequential or non-sequential information: Unordered lists are suitable for both sequential and non-sequential information. They can present steps in a process or instructions in a logical order, as well as present unrelated or loosely related items that don't require a specific sequence.

Break

• Nested lists
  • Are
    • Very
  • Cool
  • Y'know?

Break

• We

  1. Can

  2. even

  3. nest

• them

• like

  1. so.

     echo test

     Shell

     1. Isn't

        

        ^(caption)

     2. that

  2. just

     • awesome?
     • awesome?
     • awesome?

  3. I

     • know

     • it

     • right?

Text.

Ordered

1. First, you take a soap bar.
2. You wring it out dry, using your favourite hair dryer.
3. Next, you take royal honey, from the royalist bees.
4. You cook the honey, let it steam for 20 minutes, meticulously adding seasoning such as garnished carbon and torn hair.
5. Once the honey has steamed well, it should stick profusely to the wok. Breathe into it.
6. Extract Untame the stuck honey, and crumbulate it in the Rockwell dual-gyzmo combobulator.
7. Finally, to ensure everything works out, and you don't violate time-space operation principles, you shove it up your butt.

Let's try that again.

Spacing

1. First, you take a soap bar.

   You wring it out dry, using your favourite hair dryer.

   As a famous person once said, a dry soap is better a dead horse. - Anon.

2. Next, you take royal honey, from the royalist bees.

   printf("Bzzz... target acquired~");

   C

   You cook the honey, let it steam for 20 minutes, meticulously adding seasoning such as garnished carbon and torn hair.

3. Once the honey has steamed well, it should stick profusely to the wok. Breathe into it.

   Make sure the honey is as yellow as this box. If not, you may have accidentally steamed royal pee instead of royal honey.¹

4. Extract Untame the stuck honey, and crumbulate it in the Rockwell dual-gyzmo combobulator.

   

Math

Inline math is useful: $A + B + \underbrace{C + D}_{\small\text{Floppy disk!}}$. Fractions are fun. $\frac{1024}{4096} = 25$

Monospaced math: $\texttt{char} \subset \texttt{int} \subset \texttt{long}$.

But centred equations are also fun!

$$ \begin{align*} x + y + z &= \frac{1}{4} \\ 2x - y + 3z &= 2 \\ 4x - 5y + 10z &= 3 \end{align*} $$

Check line breaks here:

• $\texttt{Maybe } \texttt{(Either }(\texttt{a}, \texttt{ a}) \allowbreak \texttt{ (Bool, a))} \equiv \texttt{(Maybe a, Maybe a)}$
• $1 + 2 + 3 + 4 + 5 + \cdots + 15 + 20 + 25 + \cdots + 100 + 200 + 300 + \cdots + 500 + 100 + 1500 + \cdots + \cdots + \cdots + 0 = -1$

Blockquotes

Cat ipsum dolor sit amet, always hungry. Poop on grasses i show my fluffy belly ^{but it's a trap!} if you pet it i will tear up your hand and sniff sniff sniff sniff but step on your keyboard while you're gaming and then turn in a circle but human is washing you why halp oh the horror flee scratch hiss bite hell is other people.

#include <iostream>
int main() {
   
}

C++

• A
• B
• C

1. Uno
2. Duos
3. Tres

Let $a$ be the apple pie of my $\texttt{heart}$.

$$a ^ a = <3$$

Images

^{Have you heard of Darth Plagueis the Wise?2}

We can splay multiple images in a row too!

^{Although this isn't the multiverse, multi-images are great fun too! (images "h-auto rw")}

Did I mention that equal-height layouts are a thing!? This is made possible with h-auto.

^{Two images are better than one, for if either of them falls sucks, one can help the other up. (images "h-auto jw-80")}

^{Equal-width. No h-auto here. (images "")}

Tables

Code

Inline highlight, thanks to markdown-it-prism + markdown-it-attr: class Demo { };, function foo(a) { console.log(1); }.

#include <iostream>

int main() {
    std::cout << "Hello world!" << std::endl;
}

fn main() {
    println!("Hello world!");
}

main :: IO ()
main = putStrLn "Hello world!"

object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello world!")
  }
}

echo "Hello world!"

When no language is provided, a code block is poorly rendered:

Just plain text.

Hint: Check for element attributes with your browser devtools!

Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! 

Code: line-numbers

We use a modified line-numbers plugin, which allows skipping lines.

This raw text
is not highlighted
but it still has
line numbers

To skip lines, specify a data-output attribute. The format is similar to the command-line plugin.

• e.g. 1-2, 5, 9-20 means skip lines 1-2, 5, and 9-20.
• The following uses {.line-numbers data-start=3 data-output=2,5-6} attr.

int main() {
  // This line is skipped.
  Dog d;
  d.speak();
  // These lines are 
  // also skipped.
}

On second thought, this use of line-numbers may not make much sense, since copying this code (manually) will result in the comments being copied as well.

Code: command-line

Reference: PrismJS command-line Plugin

# Multiline.
mkdir build
cd build
cmake ..
make

What
if
we
mix
command line
# woohoo!
and
line numbers?
More
MOre
MORE
MOREEE

Response-width command line prompt:

A
B
C

dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos

Code: diff-highlight

+function myFunction() {
   // …
-  return true;
 }

line-numbers doesn't work too well with diff-highlight because our stylesheet introduces 4px extra padding per highlighted line for breathing space. We can change this in prism-diff.css, but well – line-numbers don't make too much sense with diffing, don't ya think?

+function myFunction() {
   // …
-  return true;
 }

Code: data-label

Prism.plugins.toolbar.registerButton('show-filename', function (env) {
  var pre = env.element.parentNode;
  if (!pre || !/pre/i.test(pre.nodeName)) {
    return;
  }

  var filename = pre.getAttribute('data-filename');
  if (!filename) {
      return;
  }

  var element = document.createElement('span');
  element.textContent = filename;

  return element;
});

Hello world!

Custom

Tags

Standalone: programming software-engineering

In tutorial between cpp words haskell, well, music it learning seems to work.

With thoughts aliases meddlings, diatribe.

Abbreviations

Hi, with bold, with emphasis, with strikethrough, with code.

Does it work with {% tag "tags", "meta" %}?

Next-Gen Elements

Alerts

echo "Conversely, if you drive, don't drink."
echo "test"

Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious! Supercalifragilisticespieladocious!

Details

Spoilers

abc

The quick brown fox jumped over the lazy dog.

Embeds

SoundCloud

GitHub Gist

Bye

More text here.