Theme Elements

Theme Elements will save you tons of time working on the site content. Now you'll be able to create complex layouts within minutes.
in     4.705 minutes read

I’ve put together a little post to introduce you to the HMFAYSAL OMEGA theme and get you started with Markdown. Go ahead and edit this post to get going and learn how it all works!

Elements

ELEMENTS

Writing in markdown is really easy. In any editor like notepad, you simply write as you normally would. Where appropriate, you can use formatting shortcuts to style your content.

LISTS

For example, a list:

  • Item number one
  • Item number two
    • A nested item
  • A final item

or with numbers!

  1. Remember to buy some milk
  2. Drink the milk
  3. Tweet that I remembered to buy the milk, and drank it

Want to link to a source? No problem. If you put the url in this format, like [http://alum.mit.edu/www/hmfaysal](http://alum.mit.edu/www/hmfaysal) - it’ll automatically be linked up like http://alum.mit.edu/www/hmfaysal. But if you want to customize your anchor text, you can do that too! Here’s a link to the my website. Neat.

WHAT ABOUT IMAGES?

Images work too! And they are responsive! Already know the URL of the image you want to include in your article? Images are responsive and uses lightbox.

Check out this post to learn about including images in your post.

AND VIDEOS?

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

EQUATIONS

Are you an engineer? Or a mathematician? Want to post some equations in your Jekyll blog for the world to see? No problem. HMFAYSAL OMEGA has MathJax built in to beautifully render your equations in the browser. To use MathJax simply turn on the MathJax feature by declaring in the Front YAML Matter like mathjax: true, then wrapping your equation between $$...$$ will produce something like this:

f ( a ) = 1 2 π i ∮ γ f ( z ) z − a d z

Not sure which image you want to use yet? That’s ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and change the image in the _config.yml.

ICONS

This theme includes over 360 fontawesome icons. To use an icon go to Fontawesome website and click on the desired icon to find the appropriate tag.

QUOTING

Sometimes a link isn’t enough, you want to quote someone on what they’ve said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when I introduce spellcheck! For now - it’s definitely a word.

Wisdomous - it’s definitely a word. Hossain Mohd Faysal

WORKING WITH CODE

Got a streak of geek? We’ve got you covered there, too. You can write inline <code> blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there.

.awesome-thing {
    display: block;
    width: 100%;
}

Learn more about syntax highlighting in this post.

READY FOR A BREAK?

Throw 4 or more dashes down on any new line and you’ve got yourself a fancy new divider. Aw yeah.

FANCY SOME COLUMNS?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum.


For more column combinations, visit this post.

BUTTONS

Some danger button

Some info button

Some warning button

Some success button

Some primary button

ADVANCED USAGE

There’s one fantastic secret about Markdown. If you want, you can write plain old HTML and it’ll still work! Very flexible.

That should be enough to get you started. Have fun - and let me know what you think @hmfaysal or at hmfaysal@alum.mit.edu :)


  Tagged with  •