Pro Code Filters


Activate a GitPitch Paid Plan to unlock Pro Code Filters.

The Pro Code Filters feature lets you select and inject specific lines or blocks of code onto your slides from any source file or GitHub GIST.


Introducing Code Filters

By default, the following GitPitch code tools render the full source file contents onto your slide:

Code filters let you select portions of a file for rendering on a slide instead of rendering the entire contents of the file. There are two distinct types of code filter:

  1. The lines filter is used to render individual lines or a range of lines from source.
  2. The tags filter is used to render lines that fall between user-defined tags within source.

The following sections demonstrate the use of code filters with each of these code tools.



Code Slide with Lines Filter

This section demonstrates the use of the lines filter to extract a single function from large Elixir source file and render only that function on a sample slide:


---?code=src/app/monitor.ex&lang=elixir&lines=22-28

@snap[north-east span-100 text-06]
Code Delim with Lines Filter
@snapend

This markdown snippet renders as follows:

CODE-FILTER-CODE-DELIM-LINES

In this example, a range of lines from 22-28 was activated on the lines filter. Note, multiple values can be specified on this filter using comma-separated values, for example, lines=1,9-14, 18.



Code Slide with Tags Filter

This section demonstrates the use of the tags filter to extract a single function from large Elixir source file and render only that function on a sample slide:


---

@snap[north-east span-100 text-06]
Code Widget with Tags Filter
@snapend

@code[elixir zoom-14](src/app/monitor.ex?tags=initpipe)

This markdown snippet renders as follows:

CODE-FILTER-CODE-DELIM-LINES

In this example, all lines of code found within the user-defined initpipe tag were rendered on the slide. Lets look more closely at the monitor.ex file to see how the initpipe tag was defined. Here’s the relevant snippet from that file:

.
.
def start_link(pipeline) do
  GenServer.start_link(__MODULE__, pipeline)
end

# tag::initpipe[]
def init(pipeline) do
  with {:ok, _} <- validate_modules(pipeline),
       {:ok, _} <- validate_behaviours(pipeline),
       {:ok, _} <- activate_tracing(pipeline),
       state    <- initialize_monitor(pipeline),
    do: start_monitor(state)
end
# end::initpipe[]

#
# Handlers for intercepting :erlang.trace/3 and :erlang.trace_pattern/2
# callbacks for modules registered on the pipeline.
#
.
.

See the opening tag directive and the corresponding closing end directive for the initpipe tag. More generally, using tags within yours ource code is accomplished as follows:

  • To indicate the start of a tagged region, insert a comment line in your code.
  • Assign a unique name to the tag directive.
  • In the sample code above, the tag was named initpipe.
  • Insert another comment line where you want the tagged region to end.
  • Assign the name of the region you want to terminate to the end directive.
  • Opening and closing tag directives must be terminated with [] syntax.

Note, multiple values can be specified on this filter using comma-separated values, for example, tags=initpipe,events,shutdown.



GitHub GIST Slide with Lines Filter

This section demonstrates the use of the lines filter to extract a multiple lines from a GitHub GIST and render only those lines on a sample slide:


---?gist=jlong/2428561&lang=js&lines=1,4-6,10

@snap[north-east span-100 text-06]
GIST Delim with Lines Filter
@snapend

This markdown snippet renders as follows:

CODE-FILTER-GIST-DELIM-LINES

In this example, multiple ranges of lines 1,4-6,8 were activated on the lines filter. Note, when activating multiple values on this filter use comma-separated values as demonstrated above.



GitHub GIST Slide with Tags Filter

This section demonstrates the use of the tags filter to extract multiple blocks of code from a GitHub GIST and render those blocks on a sample slide:


---

@snap[north-east span-100 text-06]
GIST Widget with Tags Filter
@snapend

@gist[ruby zoom-18](onetapbeyond/b3bb5ed063b7683ed51592edf4f80056?tags=timings,parse)

This markdown snippet renders as follows:

CODE-FILTER-GIST-WIDGET-TAGS

In this example, all lines of code found within the user-defined timings and parse tags were rendered on the slide. Lets look more closely at the GIST content to see how the tagged content was defined. Here’s the relevant snippet from that file:

.
.
# tag::timings[]
if timings
  timings.record :read
  timings.start :parse
end
# end::timings[]  
# tag::parse[]
doc = (options[:parse] == false ?
  (Document.new lines, options) :
  (Document.new lines,options).parse)
# end::parse[]
.
.

See the opening tag directive and the corresponding closing end directive for the timings and parse tags. More generally, using tags within your source code is accomplished as follows:

  • To indicate the start of a tagged region, insert a comment line in your code.
  • Assign a unique name to the tag directive.
  • In the sample code above, the tags were named timings and parse.
  • Insert another comment line where you want the tagged region to end.
  • Assign the name of the region you want to terminate to the end directive.
  • Opening and closing tag directives must be terminated with [] syntax.

Note, when activating multiple values on this filter use comma-separated values as demonstrated above.