Displaying Code Snippets In A Step
When writing tutorials for programmers it is helpful to display code snippets in the HTML. This lesson will show you how to do that.
Add Code Snippet
To display code snippets in your lesson you will add the snippet to the Video Embed Code area for a step. Right click on the step and select Set Video Embed Code...
Add Code To "HTML For Video" Field
When the dialog appears, add the code to the HTML For Video field. A couple of notes:
1) Surround the code in <pre></pre> tags.
2) Convert all instances of < to <
3) Convert all instances of > to >
Export as HTML
If you export as HTML you should now see something similar to this (I used the Black BG template). Notice how the text is centered and does not stand out.
You can make your code snippets look much nicer using a little CSS. I added some CSS to the black.css file in the template and now the code snippet look like this. I've included the CSS I used below.