Are you a writer who isn’t quite familiar with writing for the web, let alone familiar with the very basics of HTML? Or maybe a hobbyist web designer/developer who gets impatient with repeating the same HTML code all the time when you write down your content, regardless if you’ve got some styling via CSS along with it?
Take a look at the syntax below:
Yo, yo, YO! Welcome to mah HOOOD~!! =================================== (Translation: Welcome to my site~!!) ------------------------------------ What's with all the dashes and the equal signs underneath the top text? Can someone explain to me? **SOMEONE is very curious now!** *Well, not that curious...*
If you type this out on a text editor/IDE, or even on a blank field to write your content on CMS (content management system) software like WordPress, the markup above will be converted to the following HTML:
… in which the content you will see on a web browser will look like this:
Yo, Yo, YO! Welcome to mah HOOOD~!!
(Translation: Welcome to my site~!!)
What’s with all the dashes and equal signs underneath the top text? Can someone explain to me?
SOMEONE is very curious now!
Well, not that curious…
(Please ignore the styling of the quoted block above. The above code shouldn’t have any CSS styling in it, but this is my blog, and it’s heavily styled, so that’s why it looks like that.)
The markup shown at the top is what we call Markdown. Markdown is a text-to-HTML converter syntax specifically created for web writers and web designers and developers who are frustrated with writing all these repetitive HTML tags and CSS styling when the primary focus is to create your content and deploy it to the web. The syntax will be converted to structurally valid (X)HTML when processed through the web server.
The syntax was created by 2004 by John Gruber and the late Aaron Swartz using Perl. It was built to create web text content from plain text with some help from designated characters without the hassle of using repeated HTML/CSS code. More information and history regarding Markdown can be found on John Gruber’s site right here.
Some quick facts
- File extensions of Markdown files are .md or .markdown, but you don’t upload these on your web server. You do upload these on GitHub Pages (if you do plan on hosting a site over there) and will automatically convert to HTML files when viewed on a browser.
- Markdown is now supported by (almost) every text editor and/or IDE available out there. Sublime Text, Notepad++, Nitrous, etc. If not, they should have extensions or plugins available.
- Markdown is also supported by (almost) every blog and CMS software out there, which also includes the very popular WordPress and the lightweight blogging platform Ghost. You can extend your CMS software with Markdown support through plugins if available.
- GitHub, the most popular Git repository service, uses Markdown as its default content syntax. In fact, GitHub also extended Markdown with their additions and modifications for easier content creation on README file.
- Markdown is the default syntax used on static site generators such as Jekyll and Hugo.
- Markdown is also being supported by many web/mobile apps, such as the gaming/community chat app, Discord.
The complete documentation about Markdown from its installation to everything else is at its primary site.
I am not a very tech-savvy person. What’s the easier way to write my content using Markdown?
There are many online content editors that use Markdown. You can even use them to test Markdown for the first time too. You can try in a few of these places:
We will be going to the basic nitty-gritty of Markdown, coming soon on the next part of this handy Markdown Tutorial. Thank you for joining in!
Sharing is Caring!
- Click to share on Twitter (Opens in new window)
- Click to share on Facebook (Opens in new window)
- Click to share on Tumblr (Opens in new window)
- Click to share on Pinterest (Opens in new window)
- Click to share on Pocket (Opens in new window)
- Click to share on Reddit (Opens in new window)
- Click to share on Skype (Opens in new window)