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.

Rather than leaving language detection to the underlying library we strongly encourage the use of explicit language hints when you use fenced code blocks. Language hints tell the underlying library exactly how to to render your code.

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
    ```

The use of a language hint also ensures that the correct escaping is applied for your style of source code. This is especially important if you are attempting to present code that uses markup syntax, such as HTML, XML, PHP, etc.

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.