Displaying Code Snippets In A Step

The video embed feature in ScreenSteps is primarily used for displaying video in the step media area when exporting to HTML. Really it is just a means of adding raw HTML code to your lesson which means you can insert any HTML or javascript you want to.

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 &lt;

3) Convert all instances of > to &gt;

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.

Add CSS

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.

Sample CSS 

pre {
	text-align: left;
	margin: 10px;
	padding: 0 0 0 2px;
	font-family: Monaco, monospace;
	font-size: 11px;
	line-height: 1.3em;
	color: #F8F8F8;
	background-color: #000000;
	overflow: scroll;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
}

8 Comments

Mark Snow

That is great, if you are exporting to HTML.
For those of use forced to export to PDF due to company policies, what can we do to get the same results?

Trevor DeVore

As of version 2.6 there isn't a great solution for PDF output. If you have a text editor that colorizes your scripts for you then you can copy/paste the colorized text into the step instructions. You won't get control over the font but you will get nicer looking code.

Karin H

Finally got round to 'adapting' the embedded video code to try and embed AWeber webforms in lessons. Then I discovered this lesson and that made it way easier.
Copied the javascript of one of our webforms between the and voilà - job done. Wow, that was really easy
Tip: don't use the raw code of the webform, it will add loads of white space above the actual 'form' due to the hidden code.

Another box ticked off my to do list and another benefit I've found in using/combining ScreenSteps and ScreensSteps Live with other of my favourite programs to market our business. Thanks!

Bruce Garlock

Hopefully this feature will be added in a future version. This is very useful software, but the text formatting leaves a lot to be desired, as well as easily highlighting important areas in a manual.

Trevor DeVore

@Bruce: We do have plans to add more powerful and flexible formatting options in a future version so that formatting blocks of text with styles that you define will be much easier.

Gregg

Yes, it would be nice to have different formatted options (colored box, relevant graphic image next to the text, etc.) for things like "Tip", "Note", "Important", etc. points that should stand out in the flow of the articles.

George Everitt

This has been a problem for 2 years - are there any plans to address this? We just signed up, and love the software, but this is kind of a tough sell to our customers who demand PDF.

Trevor DeVore

@George - the next major upgrade will support code formatting within the text. This means code will look nice in PDF output. I can't give you a release date but the next major upgrade isn't terribly far off.

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.