Test

Creating worthwhile content is a laborious task. Doing it correctly the first time saves everyone involved enormous amounts of time down the road. Taking the time to produce content the right way is always worth it because sloppy work tends to accrete exponentially as time goes on.

Colors

Baja Ibogaine uses a simple tri-color palette. Adherence to these specific colors is important. Simply typing style="color:orange" does not render the proper hue of orange.

HEX: #FF6600

HEX: #000000

HEX: #FFFFFF


Markdown

All content is created in a markup language called Markdown1.

If you are not familiar with it, don’t worry. It’s fairly straightforward. Go and play This Game which will interactively teach you how to write in markdown. Please give it a shot. Simply reading about it won’t be enough to grasp it.

Feel free to search youtube for ‘Markdown explainer’ to find an explainer that speaks to you. Everything we write must always be done in Markdown. So it is important that you understand it before moving on. You don’t need to memorize it, you just need to understand how it works.

Begin Markdown Reference

Table of Contents

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
YouTube Videos

Headers

H1

H2

H3

H4

H5
H6

Emphasis

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don’t matter, just that it’s a number
  4. Ordered sub-list

  5. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces.
    Note that this line is separate, but within the same paragraph.
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

There are two ways to create links.

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Here’s our logo (hover to see the title text):

Inline-style: alt text

Reference-style: alt text

Code and Syntax Highlighting

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.

var s = "JavaScript syntax highlighting";
alert(s);

Tables

Tables aren’t part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

There must be at least 3 dashes separating each header cell. The outer pipes are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break. This is Normal Text Here.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.

Horizontal Rule

Three or more: lines, asterisks, underscores

Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover – hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You’ll soon learn to get what you want. “Markdown Toggle” is your friend.

End Markdown Reference

Specific To Baja Ibogaine Theme

Images

This theme supports regular image with or without caption, wide images with or without caption and full-width images with or without the caption. The examples provided below.

Concrete roads
This regular image with caption
Concrete roads
This wide image with caption
This full-width image with caption

One neat trick which you can use in Markdown to distinguish between different types of images is to add a #hash value to the end of the source URL, and then target images containing the hash with special styling. For example, to add a wider image, you need to add the #wide value to the end of the source URL:

Concrete roads

![Concrete roads](/assets/images/posts/style/8.jpeg#wide)
or
![Concrete roads](/assets/images/posts/style/8.jpeg#left)
![Concrete roads](/assets/images/posts/style/8.jpeg#right)

Align Left

Fog circling above snowy mountains leading down to Iceberg lake surrounded by trees

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar tincidunt turpis ac fringilla. Mauris eget dolor neque. Donec ac ex quis lectus sagittis vestibulum.

Align Right

Snow-covered mountains shrouded in mist and clouds

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

Footnotes

The quick brown fox2 jumped over the lazy dog3.Footnotes are a great way to add additional contextual details when appropriate. Ghost will automatically add footnote content to the very end of your post. Don;t worry about deleting or adding footnotes, they will change their true numbers based on which are present. These are 3 and 4 but render as 2 and 3.

Sidenotes

SidenotesThis is a sidenote and displays a superscript display a superscript. The sidenote Liquid tag contains two components. The first is an identifier allowing the sidenote to be targeted by the twitchy index fingers of mobile device users so that all the yummy sidenote goodness is revealed when the superscript is tapped. The second components is the actual content of the sidenote. Both of these components should be enclosed in single quotes. Note that we are using the CSSThis is a second sidenote and displays a superscript ‘counter’ trick to automagically keep track of the number sequence on each page or post. On small screens, the sidenotes disappear and when the superscript is clicked, a side note will open below the content, which can then be closed with a similar click. Here is the markup for the sidenote at the beginning of this paragraph:

{% sidenote 'sn-id-whatever' 'This is a sidenote and *displays a superscript*'%}

This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

Quoting

“Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.” ― Scott Adams

Align Left

“Clients don’t understand their success is reliant on standing out, not fitting in.” ― Don Draper
<blockquote class="alignleft">“Clients
don’t understand their success is reliant
on standing out, not fitting in.”
<cite>― Don Draper</cite></blockquote>

Quotations are used for a variety of reasons: to illuminate the meaning or to support the arguments of the work in which it is being quoted, to provide direct information about the work being quoted (whether in order to discuss it, positively or negatively), to pay homage to the original work or author, to make the user of the quotation seem well-read, and/or to comply with copyright law. Quotations are also commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Align Right

“To create a memorable design you need to start with a thought that’s worth remembering.” ― Thomas Manss

Quotations are used for a variety of reasons: to illuminate the meaning or to support the arguments of the work in which it is being quoted, to provide direct information about the work being quoted (whether in order to discuss it, positively or negatively), to pay homage to the original work or author, to make the user of the quotation seem well-read, and/or to comply with copyright law. Quotations are also commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Lists

Unordered Lists

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

Usage notes:

  • The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared.
  • There is no limitation to the depth and alternation of nested lists defined with the <ol> and <ul> elements.
  • The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful.

Ordered Lists

The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list.

Usage notes:

  1. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets.
  2. There is no limitation to the depth and alternation of nested lists defined with the <ol> and <ul> elements.
  3. The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful.

Tables

Table Caption
Content categories Flow content
Permitted content An optional <caption> element;
zero or more <colgroup> elements;
an optional <thead> element;
an optional <tfoot> element;
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts flow content
Normative document HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

Videos

Audio

Form Embed

  1. Wikipedia - Markdown & Mastering Markdown ↩

  2. Foxes are red ↩

  3. Dogs are usually not red ↩