Author avatar

Ashutosh Singh

Highlighting React Code in GitHub Flavored Markdown

Ashutosh Singh

  • Sep 25, 2020
  • 7 Min read
  • 9,895 Views
  • Sep 25, 2020
  • 7 Min read
  • 9,895 Views
Web Development
Client-side Frameworks
React
Front End Web Development
Introduction

Introduction

Since its release in 2004, Markdown has become one of the most popular markup languages. Technical writers widely use Markdown for blogs, articles, documentation, etc. because of its lightweight simplicity and cross-platform usage; even this guide is written in Markdown behind the scenes.

GitHub uses its own version of markdown known as GitHub Flavored Markdown, enabling users to interact with other users, reference issues, or pull requests. Even if your project or repository doesn't include any markdown or .md files, you will still have to use markdown for README, issues, pull requests, gists, etc.

Quite often, you will embed code snippets or blocks in Markdown. For example, embedding code when reporting a bug can save time and help the reviewers, maintainers, or anyone seeing that issue. You can also highlight code based on the programming language to improve the code's readability and context.

In this guide, we will discuss how to insert and highlight React code in GitHub Flavored Markdown.

Inserting Code

You can insert code in GitHub Flavored Markdown (GFM) by either indenting your code four spaces or using fenced code blocks.

For example, here is a sample code for a simple express server.

1const express = require("express");
2const app = express();
3const port = 3000;
4
5app.get("/", (req, res) => {
6  res.send("Hello World!");
7});
8
9app.listen(port, () => {
10  console.log(`Example app listening at http://localhost:${port}`);
11});
javascript

Copy and paste this code into a .md file in any GitHub repo or a gist and commit the changes. Here is how this Markdown file will look:

no_indents

Since you have not included any indents or fenced code blocks, GFM treats the code as regular text. You can see this GitHub gist here.

Now indent the entire code four spaces. You will notice that the code block will fade once you have indented the code.

fade_code

Now commit this change, and you will see that the Markdown will format the code block this time.

four_indent You can find this example gist here.

Fenced Code Blocks

You can also insert code in Markdown by placing triple backticks (```) before and after a code block. Notice that, like last time, the code will fade inside triple backticks.

fenced_code_block

Here is how this Markdown file will look:

fenced_code

You can find this example gist here.

Highlighting Code

To highlight code, write the name of the language the code is written in after the initial triple backticks. In the above example, the code is written in JavaScript, and hence javascript is added after triple backticks. highlighted_code

Here is how this highlighted code will look:

preview

You can find this example gist here.

Similarly, you can highlight code written in other programming languages such as Ruby, Python, etc.

React is a JavaScript framework, or technically a library, so adding javascript after the triple backticks should work and highlight the code. Adding javascript after ``` does highlight the code, but it does so by treating it as a JavaScript code.

Since React uses JSX to highlight React code, jsx should be used instead of javascript after the triple backticks.

Here is a sample React code that illustrates this. 

1import React from 'react';
2import './App.css';
3
4function App() {
5  return (
6    <div className="App">
7           Hello World!
8    </div>
9  );
10}
11
12export default App;
jsx

First, javascript is added after the triple backticks.

javascript_highlight

Here is how this code is highlighted.

preview

You can find this example gist here.

Now, jsx is added after the triple backticks.

JSX_highlight

Here is how the code is highlighted this time.

preview

You can find this example gist here.

Though the differences are minute, you can see how the highlighting is changed based on the use of javascript and jsx after ```.

In general, it is better to use jsx to highlight React code. Even in this guide, jsx is used in the above code block to highlight React code.

preview

Conclusion

In this guide, we discussed how you can insert code in GitHub Flavored Markdown using indentation and fenced code blocks. We also discussed how to highlight JavaScript and React code in GitHub Flavored Markdown.

Here are some resources that you may find useful:

Happy coding!

LEARN MORE