StackEdit-logo logo
| Links | Headings | Video | Images | Anchors | Tooltip | Abbreviations | Fenced code block | Comments | CSS

A very exciting heading 😄

Many of us are learning Markdown. And many of us aren’t.
What follows are my notes, taken while learning.
May they help many of us.

That was the last piece of pseudo-poetry in this document, I promise.
Markdown cheat sheets are everywhere, even built into the StackEdit menu, ready to be consulted. But what if you want something more complete? What if you want to see how elegant a page MD can produce, without needing to add (much) html. What if you are like me, attracted to MD’s beautiful simplicity, while at the same time wanting to create color, liveliness and elegance in your pages…

This document is a work-in-progress. I started learning MD and StackEdit just days ago…
I am not a developer. On my best days I am almost a designer… Secretly I hope this will become a collaborative effort, a tutorial written by a collective of experts and daydreamers like me.

Winter 2019-2020,
Bert

Links

A link
A link with a tooltip/title.
A link with tooltip/title, without destination. (so it’s not a real link, just a trick (# or https://"") to give a word or a textstring a tooltip… (if you think it looks too much like a link, you’re right. See below for a simple solution)

A [link](https://google.com)  
A [link](https://google.com "to google") with a tooltip/title.  
A [link](# "to nowhere") with tooltip/title, without destination.

I just discovered it is quite comfortable to add a link in StackEdit using this shortcut: mod + shift + l.

For windows and linux: mod = the Ctrl key,
for mac: mod = the Command key.

Distrowatch
Google
Rabbithole
Clock title/tooltip, “false” link
Html very “clean” for reading md, no visible link address or ref. [e.g. number]. Example:

Alice’s Adventures in Wonderland is an 1865 novel written by English author Charles Lutwidge Dodgson under the pseudonym Lewis Carroll. It tells of a young girl named Alice falling through a rabbit hole into a fantasy world populated by peculiar, anthropomorphic creatures.

In md:
under the pseudonym [Lewis Carroll]. It tells of a young girl named Alice

The reference list can be below a paragraph or in the footer area of the page, or anywhere. Here it looks like this:

md:

[1]: https://distrowatch.com   
[2]: https://google.com/
[3]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[Clock]:# "What time is it?"
[HTML]: http://en.wikipedia.org/wiki/HTML 
[Lewis Carroll]:  https://en.wikipedia.org/wiki/Lewis_Carroll

This is not really possible using only standard MD. Some platforms ( Kramdown, …) offer it, StackEdit doesn’t. You could use html in your MD, if you don’t mind. Like this:
<a href="http://example.com/" target="_blank">Hello, world!</a>

Hello, world!

Another solution is to set it globally for the page: just add:
<base target="_blank">to the head section. I’ve done that for this document. Now, ALL links open in a new tab… including internal links (TOC, menu, anchors)… hm, not ideal! I’ll probably remove that global setting from the <head>. (Now removed, there seems to be a consensus in the md world you should not force this on a site visitor. He or she can easily open a link in a new tab: Ctrl + click the link (Command + click on mac), if that’s what is wanted.)


Headings

Heading H1

HeaingrH2

Heading H3

h1 and h2 are underlined…from h3 and smaller, there are no more lines… How to get rid of these lines?
I found a way and explained it here


Video

! Yes, adding an iframe does work well! Much easier than the Markdown-method (= picture from Youtube as link to video to be watched in YT)

Of course it doesn’t look nice or reader-friendly in the Markdown text:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ywg6KC4ngHY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>>

This is the default method for video in Markdown:
[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

Put simply, an iframe makes me happy…

In case you prefer the Markdown way, there’s a nice online service for youtube that makes it very easy: embedyoutube
All you need to do, is paste the video address and embedyoutube takes care of the rest. Example: I pasted this:
https://youtu.be/OVQQ3An4csE
and that resulted in (md):
[![Mooji: Nothing](http://img.youtube.com/vi/OVQQ3An4csE/0.jpg)](http://www.youtube.com/watch?v=OVQQ3An4csE "Nothing!")

and that creates this image-link to the video in YT:
Mooji: Nothing
(The optional Alt “Mooji: Nothing” and optional title “Nothing!” were added by me.

Alternatively, of course the good old simple text link also works:

“You should really watch this Mooji guy 😉”

ref list:

[this Mooji guy]: <http://www.youtube.com/watch?v=OVQQ3An4csE>

Responsive video

Using the Markdown way, with a picture link to youtube, there’s nothing to do, if you are using a responsive template. For embedded video however, there is no Markdown solution. The embed code coming from youtube, vimeo or similar has to be put into a <div>.
It has to be pasted between:

<div class="video-responsive"> and </div>

So, the “happy” video above, now looks like this:

<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uc81sp6fpao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

And in your CSS you add:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Images

me![me](https://cdn.pixabay.com/photo/2014/12/17/21/30/wild-flowers-571940_960_720.jpg "hello there...")

Paul Simon
Both images have a tooltip (title)

sunlight
[![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg "a link to wikipedia")](https://en.wikipedia.org/wiki/Father)

Images: size:

Markdown has a beautifully simple way to set the size of an image, just add " =WxH" See the code under the picture.
sunlight
![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg =96x72)

Or by percentage? No, doesn’t work

I used pixels, just like in the above picture, and here that corresponds to 20% of the original:
sunlight
md: ![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg =192x144)

Images: position : Use md? No. Html is needed…

…but is it really needed? keep reading 😉

( It was a bit of a struggle to make the html code, including the tags, visible here. Until I learned about the Fenced Code Block )

<p align="center">
<img src="https://cdn.pixabay.com/photo/2015/03/02/23
/40/father-656734_960_720.jpg" width="96" height="72">
</p>

The “align” attribute is deprecated, but works, unlike the alternatives I tried… Maybe we’ll need some custom CSS to avoid the html here…

Took what looked like the best solution from that discussion:

sunlight![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg#right =192x144)
Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Now let’s try “center”:

sunlight![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg#center =192x144)

It didn’t seem to work at first, until I realized it can’t work in the editor,
as the CSS was added to a custom template, that starts being used only after the page is exported. So it works when the html page is viewed in the browser.
For the sake of completeness I’ll add “#left” too: (and some Latin again 😉)

sunlight![sunlight](https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg#left =192x144)

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

I’ll copy that great solution from tremor at stackoverflow here:

[](https://stackoverflow.com/posts/43691462/timeline "Timeline")

I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:
First your Markdown image code:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Note the added URL hash #center.

Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

To this code I added a little to give the images some margin:

img[src*='#left'] {  
    float: left;  
    margin-right: 15px;  
}  
img[src*='#right'] {  
    float: right;  
    margin-left: 10px; 
    }

It is worth mentioning that this solution on stackoverflow was followed by:

You should be able to use a URL hash like this almost like defining a class name and it isn’t a misuse of the ALT tag like some people had commented about for that solution. It also won’t require any additional extensions. Do one for float right and left as well for any other styles you might want.

I haven’t tried this yet, but it sounds correct and very promising… 🚀

Adding custom CSS like the above is not difficult in StackEdit:
From the menu choose Templates. Choose the one you want from the Dropdown, say “Styled Html”. Copy it (button) and rename it: e.g. “John’s Styled Html”. Open it and you can add <style></style> in the head section, with the above left-right-center code in between <style> and </style>

Images from “reference style list”

Not complaining about the weather: zee
A parrot having lunch: papegaai

[a]: <https://cdn.pixabay.com/photo/2015/03/02/23/40/father-656734_960_720.jpg> [c]: <https://cdn.pixabay.com/photo/2020/01/17/11/32/rainbow-lorikeet-4772794_960_720.jpg>


Anchors

A picture is worth a thousand words.

It works, but use no capitals in the (#anchor)
Another one:
Let’s watch a movie

>A [picture](#images) is worth a thousand words

It works, but use  **no capitals** in the (#anchor)
Another one:
[Let's watch a movie](#video)

Tooltip or Title

adding a remark, an explanation or a sort of footnote to text that is not a link.

----> What follows was part of my learning process. It works very well, but I have now chosen abbreviations as my tooltip solution.

There was already an example in links :
md: a [link](# "to nowhere") with title, without destination.

Result: a link

This works fine, also in Reference Style Links.
See the silly “Clock” example in links. Its tooltip/title comes from the reference list: [4]: # "What time is it?"

Once upon a time there was a gnome

md: Once upon a time there was a [gnome](# "(in folklore) one of a species of diminutive beings, usually described as shriveled little old men, that inhabit the interior of the earth and act as guardians of its treasures; troll.")...

Sometimes, having the title/tooltip available in the Markdown text is not wanted, so in that case we can use the Reference style list. The gnome example then becomes:

Once upon a time there was a gnome… ( md: [gnome][7])
And the list contains:

[7]: # "(in folklore) one of a species of diminutive beings, usually described as shriveled little old men, that inhabit the interior of the earth and act as guardians of its treasures; troll."

Or, even more elegant, when reading the md:

Once upon a time there was a gnome … ( md: [gnome])
And the list contains:

[gnome]: # "(in folklore) one of a species of diminutive beings, usually described as shriveled little old men, that inhabit the interior of the earth and act as guardians of its treasures; troll."

appearance

Can we do better* ? We need a way to indicate there’s a tooltip, making it look different than a link. The word “better” above shows a simple solution: an asterisk added to the word shows the reader there’s a tooltip/title and no real link.
md:[better*](# "Much better!")

I wonder if Mark Down would have liked this? 😉

But wait… there’s a

…much better solution with :

Abbreviations

Simplest way to get a tooltip

The HTML specification
is maintained by the W3C.

BV exclaimed:

Abbreviations are fun!

In this case too, there’s a reference list :

*[HTML]: Hyper Text Markup Language
*[W3C]:  The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
*[Abbreviations are fun!]: this was to test if it works with more than literal abbreviations.

Once upon a time there was a giant

*[giant]:(A mythical human of very great size.)

It’s light, simple, needs no extra CSS or HTML
In the *[text] reference, capitals are accepted and there can be spaces in between words, no hyphens needed.
One of its unique features is that if a word is in the reference list, it will create a “tooltip” anywhere that word appears in a document.
I’ll use this one!

Fenced Code Block

<p align="center">
<img src="https://cdn.pixabay.com/photo/2015/03/02/23
/40/father-656734_960_720.jpg" width="96" height="72">
</p>```

Comments

All credits to Magnus. This is perfect:

Invisible comment 😄 :

If I would remove the back-ticks around the following code block, nothing would be there. It would be just a comment in the editor’s left pane:

[//]: # (This actually is the most platform independent comment)

this is the same:

[comment]: # (This actually is the most platform independent comment)

this too:
[comment]: <> (This actually is the most platform independent comment)


CSS

A style sheet for markdown pages

It was a real joy to discover some people have published style sheets for Markdown. Amazing how the right style sheet can contribute to a page!
Here is what I found:
JasonM23
Markedstyle
Markdowncss
Otsaloma
Mixu-net (full-size examples towards bottom of page)

There is probably much more to be found with a more patient search than mine…

Let’s dress this page with some different styles:

Foghorn
Markdown5
Screen
Avenir-white


Just playing here: make emojis bigger: make them h1: # :smile: :cry: :kiss: :heart:

Let’s agree that’s the footer for now.
Bye and thanks for reading this far.

Back to top


😄 😢 💋 ❤️ 😊 🛏 🚗 🚀 ✋ ⭐️ 🌔 🐟 🐶 🐱 🐘 🍅 🍐 🍎 🥚 🍞 🎸 🥔 🐰 🎤 🥁 👼 🐭 🥒 🔈 🦐 🐊 👶 🧀 🐒 🍈 💩 🐝 🦋 ⌚️ 🍌 ⛵️ 🦅 🐒 🐯 👦 👧 👨 👩 ㊙️ ☀️ ☁️ 👡 👞 🐻 🍺 💍 🍰 🥕 🚌 🚲 🍪 ✂️ 🎺 🚊 🏠 🍓 🍝 🐴 🎻 🙇 ⛲️ ⛪️ 🐸 🐍 ⛰ 👃 👁 👂 🐑 📖 👗 🥄 📆 🔪 🏫 🍕 🌈 🐫 💡 ☔️