--- title: "Markup: Syntax Highlighting" excerpt: "Post displaying the various ways of highlighting code in Markdown." header: teaser: "markup-syntax-highlighting-teaser.jpg" tags: - code - syntax highlighting --- 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] [^1]: ### GFM Code Blocks GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`. ```css #container { float: left; margin: 0 -240px 0 0; width: 100%; } ``` ```html {% raw %}{% endraw %} ``` ```ruby module Jekyll class TagIndex < Page def initialize(site, base, dir, tag) @site = site @base = base @dir = dir @name = 'index.html' self.process(@name) self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') self.data['tag'] = tag tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' tag_title_suffix = site.config['tag_title_suffix'] || '–' self.data['title'] = "#{tag_title_prefix}#{tag}" self.data['description'] = "An archive of posts tagged #{tag}." end end end ``` ### 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: ```ruby 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. {% gist mmistakes/6589546 %}