Markup: Syntax Highlighting

2020-02-02
  1. code
  2. syntax highlighting
  3. markdown

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.1

GFM Code Blocks

GitHub Flavored Markdown fenced code blocks are supported. Ifyou want to modify styling and highlight colors, edit gatsby-browser.js to import another prism theme.

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}
@import "../../scss/variables";

.tags {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 100%;
  padding: 0;
  font-size: $tags-size;

  &__item {
    display: inline-block;
    padding: 15px 40px 15px 0;
    overflow: hidden;
  }
}
import styles from "./tags.module.scss"

const Tags = ({ tags }) => {
  return (
    <ul className={styles["tags"]}>
      {tags &&
        tags.map(tag => (
          <li key={tag.fieldValue} className={styles["tags__item"]}>
            <Link to={`/tags/${kebabCase(tag.fieldValue)}/`}>
              #{tag.fieldValue} ({tag.totalCount})
            </Link>
          </li>
        ))}
    </ul>
  )
}

export default Tags

Code Blocks in Lists

Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., 1.). Usually this will mean indenting 3 spaces instead of 4.

  1. Do step 1.
  2. Now do this:

    def print_hi(name)
     puts "Hi, #{name}"
    end
    print_hi('Tom')
    #=> prints 'Hi, Tom' to STDOUT.
  3. Now you can do this.

GitHub Gist Embed

An example of a Gist embed below. NOT SUPPORTED YET.

{% gist e813c2560b0f1ecc9f5d pacman.patch %}

0 comments
Anonymous
Error: Validation Failed. The listed users and repositories cannot be searched either because the resources do not exist or you do not have permission to view them.
Markdown is supported

Be the first person to leave a comment!