Hướng dẫn sử dụng

Code blocks

Code title

function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}

Syntax highlighting

console.log('Every repo must come with a mascot.');

Line highlighting

function HighlightSomeText(highlight) {
  if (highlight) {
    // highlight-next-line
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
  // highlight-start
  if (highlight) {
    return 'This range is highlighted!';
  }
  // highlight-end

  return 'Nothing highlighted';
}

Line numbering

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

Interactive code editor

Live Editor


function MyButton() {
return <Button color="secondary" onClick={() => alert("Hello, world!")}>Click me</Button>
}

Result

Using JSX markup in code blocks

Input: 1 2 3 4 Output: "366300745"

Multi-language support code blocks

JavaScript
Python
Java

function helloWorld() {
  console.log('Hello, world!');
}

def hello_world():
  print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

Note

Some content with Markdown syntax. Check this api.

Tips

Apple
Orange
Banana

This is an apple 🍎

Usage in JSX

💡Did you know...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

Image

Example banner