How To Format In The Flow
Categories:
[Content Creation]
Tags:
[blogging],
[CMS],
[writing]
Most blogging sites today have a built-in editor with buttons to format our text. However, there is a better way to format our content to give us more control with less distraction.
These are HTML and Markdown.
Using one of these formatting methods allows you to create your posts offline while still getting your headers, quotes, and images in order. This is the best way since the site we use to access our blog may be under maintenance.
Or go down in the middle of our writing session!
Neither of the two methods are perfect, and they both have their quirks. I do not use the built-in editors that come with the various blogging sites. I find that writing my post offline using either HTML or Markdown fits my flow the best.
(and by "HTML or Markdown" I mean Markdown...)
As I write, I stick in the headers and quotes or plop a horizontal line down. All this is done without the need for me to move my fingers off my lovely Dvorak configured keyboard. Not having to move my hands to the mouse to make a heading or put a box around a block of code keeps me in 'flow.'
Anything that can knock you out of flow will.
This is the catalyst to why I formed certain habits around my writing.
Some include making sure my first draft is complete before noon, never creating a poem outside of my journal first, and taking my fingers off the home row as little as possible; that last one is the biggest when writing on a computer. There are so many distractions when writing and most of them require the use of a mouse.
Let's get into a short explanation of each method and some of the syntax used to achieve the desired formatting.
This is not meant to be comprehensive.
If these seem like too much and you like using the toolbar editor than keep using that. Do what works for you and keeps you in the flow.
HTML
This stands for Hypertext Markup Language and is used to create web pages. This allows us to make websites (slightly) more appealing. Without HTML we would only get a wall of text.
Let's go through some of the tags you can use when in a raw HTML editing mode:
Headers
To make a header in HTML, you use the 'h' tags. <h1>text here</h1> will make a level one header that says "text here."
Do not use a level one header though since the title of your post uses it by default on most blogging platforms. If you have more than one of these, it may confuse search engines. The header tags range from one to six.
Images
<img src="image.jpg" />
This is one of a few tags that need not to be closed off in the way we did the header tag above. You can put a link to an image inside the quotes, and it will display. However, if that image is taken down then the image on your post will fail to load that image.
Always upload your images to your content management system (CMS) or host them someplace you control.
Links
To create a link all you need to do is type `some text where 'URL-here' is the link and 'some text' is what you want the link to display as.
Text Manipulation
<b>text here</b> to bold.
<i>text here</i> to italicize.
<s>text here</s> to strike through.
Centering
If you wish to center something, it is best practice to add it to a parent element, but since we are often limited and do not have access to the CSS within them CMS, we can add <center> stuff here </center>.
To center the entire post, make sure all of your content is between those tags.
Markdown
Markdown's creator John Gruber made this markup language in 2004. He made this to make writing for the web easier when there is little need for the bells and whistles.
"[I made markdown] to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid XHTML (or HTML).” - John Gruber
This is my perfected way to write blog posts. As I said above, this allows me never to take my fingers off the keyboard (as does HTML). The reason I use Markdown over HTML is that the syntax is much more straightforward. This helps keep me in 'flow' as I write.
Headers
To make a header in Markdown are denoted using #. One pound sign (hashtag...) will produce a level one size header. These go to six, and each number makes the text smaller.
Images
The text inside the [] is what will be shown if the image fails and is called the alternative text. The link to the image you wish to display that is placed inside the ().
Links
Links are very similar to images. In fact, they are the same you only remove the !. [some text](link to site) is what you will type when adding a link.
Text Manipulation
**text here** to bold.
*text here* to italicize.
~~text here~~ to strike through.
Centering
There is no way to center text or images natively within Markdown. This is not a huge deal for me since I think keeping the reader left aligned when reading English is important.
If you are an email kind of nerd you can sign up for mine here. You can always replay to any of my emails to start a conversation or ask me a question.
You can donate to this site from my Liberapay account if you so choose.
Looking for a more passive way to support this site? Use this link when shopping on Amazon; it kicks back some of Amazon's profit at no extra cost to you.