TheLazy.Dev
Portfolio GitHub

Blog

showdev |markdown |github |beginners

Markdown Cheat Sheet part-4

garimasharma

Garima

Posted on January 27, 2021

Markdown Cheat Sheet part-4

TL;DR

Code and Syntax Highlighting

Code block is the part of Markdown spec, but code highlighting isn't. However many renderer's like GitHub and Markdown Here supports Code and Syntax Highlighting. Markdown Here supports a lot of languages. To see the complete list check this Flash Warning!.

If you read part-3 you might be knowing about fenced blocks.

  • Fenced blocks are the inline blocks have back ticks around.

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks they're easier and only they support syntax highlighting.

s = "Python syntax highlighting"
print(s)
Enter fullscreen mode Exit fullscreen mode 
var s = "JavaScript syntax highlighting";
alert(s);
Enter fullscreen mode Exit fullscreen mode 
No language indicated, so no syntax highlighting.
Enter fullscreen mode Exit fullscreen mode
  • This is known as code and syntax highlighting.
  • You can achieve this by adding three backticks before for code and the name of the language you have written.
  • Know more

More Examples

  • HTML 
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
Enter fullscreen mode Exit fullscreen mode
  • CSS 
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
Enter fullscreen mode Exit fullscreen mode
  • C++ 
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
Enter fullscreen mode Exit fullscreen mode

Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them.

This is the neat table 

| The           | neat          | table       |
| ------------- | ------------- | ----------- |
| well          | this          | is  the     |
| neat          | and  pretty   | way         |
| to            | make          | tables      |
Enter fullscreen mode Exit fullscreen mode

This is the neat table

The neat table
well this is the
neat and pretty way
to make tables 
There exist a less neat way to make tables
still renders neat and clean.

| The less| neat | table |
| --- | --- | --- |
| well |this| is less |
| neat | and  pretty | but |
| still  | renders | neat |
Enter fullscreen mode Exit fullscreen mode

There exist a less neat way to make tables
still renders neat and clean.

The less neat table
well this is less
neat and pretty but
still renders neat

We can use inline blocks, italic and bold words in the tables. 

Using other properties in the table 

| The           | neat          | table       |
| ------------- | ------------- | ----------- |
| well          | this          | is  the     |
| *neat*        | **and pretty**| `way`       |
| to            | make          | tables      |
Enter fullscreen mode Exit fullscreen mode

Using other properties in the table

The neat table
well this is the
neat and pretty way
to make tables
  • If you don't know these you can have a look to my blogs part-1 part-2 part-3
  • There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily.
  • It will work if you make them less neat....oh you gettin' my point. If not leave a comment.
💖 💪 🙅 🚩
garimasharma
Garima

Posted on January 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Markdown Cheat Sheet part-4
showdev Markdown Cheat Sheet part-4

January 27, 2021