Hi all, I love the Code Snippet Feature as it allows learners to copy and paste the code. One thing that would be super helpful is if there was a way to show the colors syntax highlighter for readability. Is there a way we can tap into that/add as a feature. It's critical for learners who are geared towards software engineering.

Hi.You can use an embedded iframe with highlighted code. Just build a simple web page and host it anywhere (for example github or aws).It works well, but you have to embed it as an iframe, not as a link.Below is a simple example https://360.articulate.com/review/content/23d6cc2f-8288-4c8a-a291-7a7c10b85e77/review

Hi. I have the same need. When I have couple of lines of code, it's acceptable, but when I have 20 or 30 lines of code, it is quite unreadable. Thanks.

Same here! Highlighting would improve the readability and the optic of the whole course in general.Using Screenshots instead is not a good alternative. A standard highlighting of the most common languages would be very great.Even better, but lower priority of course would be to add a function that enables individual highlighting. Thanks!

I agree that the Code Snippet block could definitely be updated with some improvements! While embedding from external sites like GitHub is an option, managing all of those individual links to external code for a coding-heavy course can still be a lot. I'd love to cut down on that link management by being able to have syntax-highlighted code straight in Rise. Additionally, right now you can change the background color of the snippet, but you can't change the text color in the snippet. So if I were to change the background color to black, the text would be unreadable because you can't change it to white or other colors.It would be great if we could get a drop-down menu where you can choose the coding language you're adding and it could auto-color the code based on the language you select. For an example of how this works, you can reference websites like CodePen or Replit where the code matches how it would look in a code editor.Unfortunately, my team has been unable to use the code snippet blocks to show code because of its lack of customization. We currently manually color text in paragraphs and numbered step blocks, which is fairly time-consuming. So if we could use code snippet blocks to present information and auto-highlight colors, that would save us a lot of time and make our courses look even better!

Thanks for this tip, Artem! I just implemented this in a course I'm developing. I'm hosting HTML files using GitHub Pages and I'm using Prism for both language-specific code formatting and automatic line numbering. Then including the URL as the source value for an iframe in Rise. Looks great!

Color Syntax Highlighter for Code Snippet

20 Replies

EvelienSchil692
Community Member
2 years ago
+1 on wanting the ability to highlight/color parts of the code!
KaylaHsu-389d13
Community Member
11 months ago
This video @HighStrap shows a workaround, and this might solve the problem for some folks.
https://www.youtube.com/watch?v=AvcDNJX_hpE&t=30s
You can see how it looks like on Rise after the fix.
https://theme-360.com/theme-component/highlight-js-integration-for-rise-360/
I am still trying to do a iframe from Github...
- SashaVodnik-857
  Community Member
  11 months ago
  Interesting.
  If I understand correctly, it looks like the process would be:
  Create a course in Rise.
  Export the SCORM.
  Open the SCORM in your file manager and add the files for this extension.
  Make any edits to the HTML, CSS, and JS files in a code editor.
  Import the updated SCORM back into Rise.
  Not sure that's scalable for my team's workflow, but interesting to know it's technically possible.
  - KaylaHsu-389d13
    Community Member
    11 months ago
    Yes, that's why it is a "workaround". :) I was playing with another approach which follows the steps below. Just share it here in case anyone is interested. The problem I tried to solve is not the syntax color highlight, but using some existing Jupyter notebook material if the SME already built them.
    
    Using nbviewer
    nbviewer is a web service that renders Jupyter Notebooks as static web pages.
    1. Upload: Upload your notebook to a public repository like GitHub.
    
    2. Get nbviewer URL: Visit the nbviewer website and enter the URL of your notebook.
    
    3. Embed: Use the URL provided by nbviewer in your iframe.
    Here is what it looks like in Rise. The embedded notebook reserved all the codes in their colors.
- PhilFoss
  Community Member
  11 months ago
  thanks for sharing that Kayla, and SashaVodnik-857 depending on your setup you could actually host that css file yourself to make it more of a global include, so all courses load the same css file. Otherwise it would be a pain if you needed to change a color value across all courses. I don't like creating external dependencies like this, but depending on your LMS setup you could point to a file that resides in your LMS/server so its not really an 'external' file.

Forum Discussion

Color Syntax Highlighter for Code Snippet

20 Replies

Related Content

Display Code Snippets in Rise 360

Highlight.js syntax highlighting in Rise

Rise - Code snippet syntax highlighting

Code Snippet Block 'copy button' Not Working?

Celebrating Our Community: E-Learning Heroes Q2 Highlights

Learn

Connect

Discover

Community

Company

Trust Center