Fenced Code Blocks




Learn By Example

This PITCHME.md markdown snippet:


    ```
    defmodule GenMetrics.GenStage.Monitor do
	use GenServer
	alias GenMetrics.GenStage.Manager
	alias GenMetrics.GenStage.Monitor
	alias GenMetrics.GenStage.Pipeline
	alias GenMetrics.GenStage.Window
	alias GenMetrics.Reporter
	alias GenMetrics.Utils.Runtime

	@moduledoc false
	@handle_demand :handle_demand
	@handle_events :handle_events
	@handle_call   :handle_call
	@handle_cast   :handle_cast

	defstruct pipeline: %Pipeline{}, metrics: nil, start: 0, duration: 0
    ```

Results in the rendering of the following slide:

HIGHLIGHTED-BLOCK


Fenced Code Blocks

A block of source code can be added to any slide using fenced code block syntax within your PITCHME.md markdown file. The basic fencing syntax involves placing triple backticks ``` before and after a block of code on your slide.

See the GitHub Creating Code Blocks documentation for further details.


Code Syntax Highlighting

Code syntax highlighting is automatically activated for all fenced code blocks that appear on your slides.

Syntax highlighting is provided by the highlightjs.org library. This library does an excellent (but not always perfect) job taking any arbitrary block of code, identifying the language for that code block, and then rendering it appropriately.


Code Language Hint

Rather than leaving language detection to the underlying library we strongly encourage the use of explicit language hints for all code slides for the following reasons:

  1. It ensures the code on your slide is rendered using the most appropriate syntax highlighting style.
  2. It also ensures that any markup in your code is properly escaped before being rendered as slide content in the browser. This is especially important when presenting HTML, XML, PHP, React snippets etc.

For example, to explicitly identify the code block from the above example as Elixir code, you can provide a language hint immediately following the opening ``` as follows:


    ```elixir
    defmodule GenMetrics.GenStage.Monitor do
	use GenServer
	alias GenMetrics.GenStage.Manager
	alias GenMetrics.GenStage.Monitor
	alias GenMetrics.GenStage.Pipeline
	alias GenMetrics.GenStage.Window
	alias GenMetrics.Reporter
	alias GenMetrics.Utils.Runtime

	@moduledoc false
	@handle_demand :handle_demand
	@handle_events :handle_events
	@handle_call   :handle_call
	@handle_cast   :handle_cast

	defstruct pipeline: %Pipeline{}, metrics: nil, start: 0, duration: 0
    ```

See the highlightjs.org language aliases for how to correctly specify a language hint for your fenced code block.


Code Syntax Highlighting Setting

See the Code Highlighting Setting documentation for details on how you can customize the code syntax highlighting style for your slideshow presentation.