Color Syntax Highlighter for Code Snippet

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!

As someone writing a training program for software, I'd like to add to this discussion that it would be incredibly helpful to be able to color text within the code snippet so it can match the colors seen in our program! I agree, screenshots are not an ideal alternative, as I would like the learner to have the ability to copy and paste the code as needed.

Hi Marci, you can examine one of my code snippets on GitHub to see the general pattern of what I did: https://github.com/docusign/DSU/blob/main/DEV005/composite/activitySolution.html

I've published the HTML files on a web server, and then in Rise just created iframe blocks that reference the published address of each HTML file.

Sasha, thank you for sharing this!  Super helpful.

Rise I would love to see an enhancement to the code block.  Being able to build developer focused content and ship as part of an LMS is extremely important and having to manage assets outside of the course and reference as Sasha has done, while doable, inevitably leads to breakage that is not easily detected.

I would love to see an update for this functionality long term for those of us that build more technically focused enablement material.

Hey Rocky,

Thanks for sharing how we can improve the code snippet block! I'll let our team know you need this enhancement. 

I'd like to mention that I would also love this feature! It would greatly enhance our code snippet readability.