Blog/Post Styleguide


A visual styleguide to get an idea of how your post will look: Bold , Strong , Emphasis , Italic

Heading styles :

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !
Hello in h6 !

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List Item 5

This is a Block Quote, It can Expand Multiple Lines

You can use the mark tag to highlight text.

This line of text is meant to be deleted text

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML


# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

Instagram Embed


Twitter Embed


YouTube Responsive Embed


Vimeo Responsive Embed


TED Responsive Embed


Twitch Responsive Embed


SoundCloud Embed


CodePen Embed


Syntax Highlighting

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

GitHub gist Embed


Input Style