Let Your Code Do The Talking

Today I’m excited to introduce a new GitPitch feature that the presentation of code within slides using nothing more than plain Markdown. This new feature is called supercharges code-presenting . You’ll soon see how you can use to effectively both static-code blocks or the complete source-code of any file within your git repo, or from directly within your GitPitch presentation. code-presenting step-through line-by-line section-by-section Code-Presenting Preview To give a quick idea what GitPitch is all about, take a look at the following screen-capture of code-presenting in-action on a single slide within a GitPitch presentation: code-presenting Activated using standard slideshow navigations, reveals a sequence of code-fragments. When revealed, a code-fragment is given while the surrounding code is automatically blurred. This means you and your audience can now enjoy within GitPitch. code-presenting sharp-focus distraction-free code-presenting Code-Presenting Live To see GitPitch live take a minute to look through the following sample presentation. I’ll wait right here until you get back: code-presenting _Markdown Presentation powered by GitPitch._gitpitch.com [ GitPitch ] gitpitch/code-presenting/master If you viewed the you will have seen code, taken from both static-code blocks and source-code from files within the git repo, being presented directly within the online presentation. And of course, works for GitPitch too. sample presentation code-presenting offline presentations Code-Presenting From Repo Source In preparation for the release of I recently added support for a new . This new slide delimiter allows you to automatically load code from any file within your repo directly into a code-block on any slide within your presentation. code-presenting code slide-delimiter The new code delimiter syntax is simple, it just takes a relative path to any source file within your repo: ---?code=path/to/source.file Any slide on which this new code delimiter has been set will automatically render a Markdown code-block. The contents of this code-block will be the contents of the file specified on the delimiter. For example, assume the file is found within your repo with the following content: src/main.go package main import "fmt" func main() {fmt.Println("Hello, world!")} Using the new code slide-delimiter, you can automatically convert the contents of this file into a code-block within a slide in your presentation with just one line of markdown in your : PITCHME.md ---?code=src/main.go This code-block is then rendered by GitPitch as follows: GitPitch Code Block With Automatic Syntax Highlighting This new delimiter makes it simple to load any file, , into any slide in your GitPitch presentations. regardless of programming language This also means that you no longer need to copy-and-paste code into your if it already exists within your repo. As an added bonus, when you change source files in your repo, the source code shown in your presentation is automatically updated too. PITCHME.md Code-Presenting Markdown Syntax The markdown syntax used to activate within your is described in detail on the GitPitch Wiki . For this blog post we are going to learn-by-example, using a simple syntax called a code-fragment marker, or . code-presenting PITCHME.md here CF-marker Let’s start by pasting the contents of the aforementioned file into a standard Markdown code-block on a slide within a : src/main.go PITCHME.md --- ```package main import "fmt" func main() {fmt.Println("Hello, world!")}``` @[1]@[3]@[5-7] As you can see, the code-block itself is a standard Markdown code-block. appear directly below code-blocks. Each CF-marker takes the form In this example, there are three : CF-markers @[fragment-range-of-lines]. CF-markers The first , , will cause line #1 (the statement) within the code-block to become a highlighted code-fragment. CF-marker _@[1]_ package The second will cause line #3 (the statement) to become a highlighted code-fragment. CF-marker, _@[3]_ , import The third will cause lines 5-through-7 (the entire function) to become a highlighted code-fragment within the code-block. CF-marker, _@[5-7]_ , main We could have saved ourselves the effort of copying this code into our by using the the new code slide-delimiter in conjunction with to achieve the same result as follows: PITCHME.md CF-markers ---?code=src/main.go @[1]@[3]@[5-7] If you opened this presentation, would render the highlighted code-fragments as follows: code-presenting GitPitch Code Presenting — Step-Thru Code Without An IDE! As you can see, is a simple yet powerful tool that lets you focus on the code you care about directly within any GitPitch presentation. code-presenting Code-Presenting Speaker-Notes For Code The syntax also supports with annotations. You can think of this feature as Annotations are . An annotation can be associated with any . For example: CF-marker code-presenting speaker-notes-for-code. optional CF-marker @[1](Go package main for executable command) If an annotation is associated with a then that annotation is automatically rendered on the slide, directly below the code-block when the highlighted code-fragment is in focus. Annotations can be used to draw attention to key points relating to the highlighted code. CF-marker Code-Presenting Simplicity-By-Design Often, as developers, the best way to describe our code is to let our code speak for itself. And for many office, meetup or conference audiences, the following mantra is a common refrain: Now with the introduction of GitPitch , showing your code enjoys first-class feature support directly within any slideshow presentation. And in keeping with the overriding GitPitch philosophy of , requires no sign-up, and there is absolutely nothing to install. code-presenting simplicity-by-design code-presenting It just works ;) Thanks for reading along today. For more news, tips and cool creations from the GitPitch community, follow me right here on Medium or on Twitter . @gitpitch