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 <
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.
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.
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?
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.
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.
and voilà - job done. Wow, that was really easyCopied the javascript of one of our webforms between the
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!
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.
@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.
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.
Add your comment