Markdown Extra Components

Wednesday. February 24, 2016 - 8 mins

Summary:

You can pick as item to see how to apply in markdown.

Especial Elements

Evidence
Side-by-Side
Star
Especial Breaker
Spoiler
MathJax
Plots

External Elements

Gist
Codepen
Slideshare
Videos

Evidence

You can try the evidence!

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

<span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span>

Side-by-side

Like the Medium component.

Image on the left and Text on the right:

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://reindigo.kavi.sh//assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Photo by John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text on the left and Image on the right:

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://reindigo.kavi.sh//assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

Photo by John Doe

Star

You can give evidence to a post. Just add the tag to the markdown file.

star: true

Especial Breaker

You can add a especial hr to your text.

<div class="breaker"></div>

Spoiler

You can add an especial hidden content that appears on hover.

<div class="spoiler"><p>your content</p></div>

MathJax

You can use mathematical notations such as TeX and MathML in a post. Just add the tag to the markdown file.

mathjax: true

Any text enclosed in double $ will be converted to an equation.

$$ E = mc^2 $$

\[E = mc^2\]

Plots

You can embed interactive plots generated in Python using Bokeh.

Prerequisite: Creating The Plot

from bokeh.plotting import figure
from bokeh.sampledata.penguins import data
from bokeh.transform import factor_cmap, factor_mark
from bokeh.embed import components

SPECIES = sorted(data.species.unique())
MARKERS = ["hex", "circle_x", "triangle"]

p = figure(
    title="Penguin size",
    background_fill_color="#fafafa",
    sizing_mode="scale_both",  # Recommended for better scaling
    tools="pan,wheel_zoom,reset,fullscreen",  # Fullscreen tool is recommended for better UX
)
p.xaxis.axis_label = "Flipper Length (mm)"
p.yaxis.axis_label = "Body Mass (g)"

p.scatter(
    "flipper_length_mm",
    "body_mass_g",
    source=data,
    legend_group="species",
    fill_alpha=0.4,
    size=12,
    marker=factor_mark("species", MARKERS, SPECIES),
    color=factor_cmap("species", "Category10_3", SPECIES),
)

p.legend.location = "top_left"
p.legend.title = "Species"

script, div = components(p)

# Save to a file (contains both div + script)
with open("example.html", "w") as f:
    f.write(div + "\n" + script)

Tip: For complex plots, gridplot is recommended over other layouts.

Embeding The Plot

Save your plot to _includes/plots/ and use the plotting tag. You can then include the plot.

plotting: true

{% include plots/example.html %}

Gist

You can add Gists from github.

{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }

Codepen

You can add Pens from Codepen.

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class='codepen'>
    See the Pen <a href='https://codepen.io/chriscoyier/pen/gfdDu/'>Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href='https://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='https://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

See the Pen Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier) on CodePen.

Slideshare

Add your presentations here!

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Videos

Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!

Example

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen></iframe>

James Foster

A Man who develops software with coffee