DEV Community

Garima
Garima

Posted on • Edited on

Markdown Cheat Sheet part-4

#showdev #markdown #github #beginners

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.

Top comments (0)

Read next

akash2061 profile image

My Journey in Rust & Tauri: Creating a Simple Pomodoro Timer App

Akash Soni -

anticoder03 profile image

Day 6: Text Animation with GSAP – A Split Letter Magic! 🎨✨

Ashish prajapati -

respect17 profile image

Learning Java Together: A Fun Journey into Coding Basics 👩🏼‍💻📚!

Kudzai Murimi -

arbythecoder profile image

Day 36: Monitoring Kubernetes with Prometheus and Grafana

Arbythecoder -