Shiori uses Bootstrap for styling. Here’s how fundamental HTML elements are displayed on Shiori. To learn more, check out Bootstrap’s documentation.

Headings

Do not use h1 tags, which is reserved for the post title. Use h2 tags mostly, and use h3 if you need subheadings.

Paragraphs

This is a regular paragraph. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Links look like this. Emphasis. Marked. Deleted. Code. user-input.

Blockquotes

This is a blockquote. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.

Lists

  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List

Tables

In Shiori, you don’t need to add the Bootstrap .table class to table. It just works.

First Name Last Name Username
Elle Kasai @ellekasai

Code

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Elle')
#=> prints 'Hi, Elle' to STDOUT.

Images

Images have round corners and are responsive by default.

That’s it!

Continue onto Shiori by Example: Helpful Bootstrap Components to learn more.