Blogging with Atom and Markdown
Markdown
Overview
The purpose of this post is to go over some of the basic logic that I am using when I blog with Markdown. Some things will be explained, but I will try to keep it short and leave the details for other posts.
General Formatting
There is a few flavors to use and with each flavor there is usually some room for variance. Such as using ** or __ (two astericks or two underscores) to say that the word is bold.
Here is what I use, and I try to keep it consistent, and this works in every flavor that I know of so far.
** BOLD
_ italics
_** Bold Italics
~~ strikethrough
--- lines
\ inline code
\`\`\`language code block with language (syntax highlighting)
`` block quote - this should indent everything and make it part of a quoted block.
Headers
Personally, I have been using the following thought process
# main topic
## subtopics
### subsections
I try not to go more than 3. I try to stick to just 2, but sometimes a topic needs more.
IF I need more than that, I typically rethink how its ordered, or add a Table or list.
Those that know Markdown and HTML already know the correlation between the two. In HTML terms, the single pound # is equivelant to an <H1> tag, two pound signs ## is an <H2> and so on up to 5.
For SEO, Accessibility, Web Standards and logic, this is critical. The placement and order of these should be logical, like having an ordered list and then having sublists. The same logic should follow for the usage of H1-H5 / # - #####.
Lists
I love lists. and think of everything that I can do with this as a list. For me this is why the H1-H5 thing makes sense to me.
When it comes to lists and blogging, I typically use an unordered list though.
I use ordered lists to show steps or heirarchy. Both of which happen more often than I thought.
- unordered list (a simple dash and space)
1. ordered list ( a simple number, period and space)
Tables
One of the things I love more than lists, is tables. I am a SQL guy at heart, so it just makes sense to me. Add some DataTables JS and you could do some really cool things with it. But inheritly tables are awesome in Markdown, and I think easy. A typical table is just something like below.
| Col 1 | Col 2 | Col 3 | Col 4 |
| ------- |:---------- | -----------:|:------:|
| default | Left Align | Right Align | Center |
Usually to make a table all you need is a vertical bar ( |) to separate each column starting with one, and then have dashes between the vertical pipes (|) on the second line. This seperates the head and body of the table.
The package for Atom.io, markdown-table-editor by susisu is great and makes it easy. This package will help automatically make the table for you and then also format it so its readable as you are typing by aligning all the vertical pipes for each row. Normally, that is not the case when you make a table. Additionally, the colon with the dashes on the second row determine if the column is left, right or center aligned, and this package will align the text in that column accordingly. It makes reading the table in the editor view almost as easy to read as the final product.
Images
Similar to tables, I use to be daunted with the markup for an image. I know HTML and can create anchor tags or image tags blindfolded, but couldn’t understand how to do it with Markdown. When I did learn, it just seems like SOOO much extra work.
So there is a package for that…the one that I have found the most useful is markdown-img. By doing ctrl-shift-v it will start the syntax at the spot you have, save the file in the folder and even create the default folder of “assets” relative to the file location. These things can also be customized in the settings for the package.
That is the typical coding for an image. Plus you need to make sure the file is in the appropriate location. This can also be a bit tricky because you want it to be relative to where the document is, and not absolute, as the absolute path may be different on the server than where you have it locally. It could even change completely depending on how you are going to deploy it.
Links
Most people cover links first then images. I am still figuring out links, though I know it, but I guess I don’t have much of a need for it in my day-to-day yet. I am trying to make an effort with it though.
[Text In Link](href or URL) "title text - onhover popup message"
Conclusion
I think that is mostly everything.
