Adding Syntax Highlighted Code in Webcourses@UCF 

 

The Syntax Highlighter tool allows you to embed code in your course with syntax highlighting, like what you may see in an integrated development environment (IDE). 

 

How to Use the Syntax Highlighter Tool 

1. In the course navigation, click the Pages tab. 
2. Click on View All Pages if it is available to see all pages in your course
3. Create a new page or select an existing page to add your code to. 
4. Click the Edit button.
5. Using your cursor, select where you would like to add your code to. 
6. Click the Plugins icon in the toolbar of the editor, then select View All.
7. Search for Syntax Highlighter in the All Apps pop-up window and select the Syntax Highlighter tool. (After doing this for the first time, the Syntax Highlighter tool will be displayed in the plugins menu).                                                                                        
8. Under the Select Language heading, select the programming language your code is in.                                                                                                                    
   • The Syntax Highlighter tool has support for most widely-used programming languages: Bash, C, C++, C#, CSS, Docker, HTML, Java, JavaScript, JSON, LessCSS, MySQL, PHP, Python, Python 3, Ruby, SASS, SCSS, SQL, and TypeScript   
       
9. Once you’ve correctly selected the programming language, paste your code into the text area that reads “Paste your code here…” 
10.  Click the Continue to Preview button.                                                                                                                                      
    
11. Confirm that the code is highlighted correctly. If not, select Edit. Otherwise, select Insert.  
    • Note: The code will display with syntax highlighting only after submitting. The syntax highlighting will not be visible when inside the Canvas editor
      
12. Click the Save button to save the changes you’ve made to your page.