Demo post [PREPRINT]2020-11-28
This post isn't meant to be shared yet, it's only here to make it easier to gather feedback. Thank you

Text goes in :content filters. It's markdown, and wraps it in a div with a markdown-body class. This is useful to apply css styles to it.

We style code with single ticks to look nice using this.

But code with triple ticks isn't great:

def hello
  puts 'world'
end

It's better to use the :code filter:

def hello
  puts 'hi'
end

The #lang: name as first line (which isn't displayed) is special, it tells the highlighter which language to pick. If not is given, it defaults to ruby.

Another cute way of displaying code is as a :codebook. Text one the left, code on the right:

Some text here

def hello
  puts 'This is some code'
end

This is another line of text, it will line up with the code that follows it in the filter.

hello()

Basically, you use %ROW to separate the rows.
Right after %ROW, and at the begining of :codebook's content, you are in a :content filter (displayed on the left).

Then you use %RUBY or %CODE to switch to the right side and write code from inside a :code. Using %RUBY will default the highlighting to ruby, otherwise specify the language with # lang: css as first line.

Here is plain code

echo "hello"

Now for some CSS!

p { margin: 0 }

When the screen width gets too small, :codebook switches to a single column view.

If the code is too long, that side will stretch

puts "This is a longer line of code. It is longer, so it goes farther right"

The stretching isn't ideal as it can require scrolling if the screen size is between the point where the code-book switches to single column and the width of the codebook, so prefer to avoid it when possible.

If you need a larger code side, it's better to can use :codebook1l to :codebook3l filters, which will add 100px to 300px to the code side.
These react better to reduced screen size by moving to single column style earlier.

:codebook1l

# once larger

:codebook2l

# twice larger

:codebook3l

# thrice larger

Because this file isn't a markdown file, many editors tend to remove trailing whitespace. :content turns trailing carets ^ into two space, so that breaking lines is possible by ending it with a single carret.
Never been a fan of this trailing spaces idea...

But wanna know something i'm quite a fan of?

Being able to hide content until the user clicks on it. (You can also re-hide this by clicking on this)

Using Ruby's interpolation, you insert #{spoiler_toggler("Name in button")}. Right after it (it must be the next html element), you do the same with #{spoiler_target(tag_name, content)}.

If you use a div as target,

The content appears under as a div!

If you want a spoiler in a :codebook, an possible option is to use %AFTER after the %CODE or %RUBY part. The look is a little different, but mostly, when the code-book switched to single column style, the %AFTER part will be after the code.

Guess the number this will return

Random.rand(10)

7

And if you try reducing the width of the window

# You can see the single column style

You can also use footnotes. Using [^name], like so1.

The name can also just be a number. In any case, the footnotes will be numbers in order from the top of the document.

  1. ↩

    You get this footnote at the bottom of the post, which can also have formatting.