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.
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.
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
Any updates on this feature release? Or even something more simple, such as a copy/paste button so a learner can quickly grab the code block and use it?
Hi Sasha! -- I don't suppose you could post an example of the code or method you used to pull that off, could you? -- I'm hoping to do something similar. Would love to see the example code block, iframe target, etc.
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.
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.
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!
15 Replies
Hey Rocky,
Thanks for sharing how we can improve the code snippet block! I'll let our team know you need this enhancement.
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!
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
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!
Any updates on this feature release? Or even something more simple, such as a copy/paste button so a learner can quickly grab the code block and use it?
Hi Steven, this isn't on our planned roadmap, but if we make any changes in the future that help we'll be sure to update this thread.
Hi Artem, thanks for the tip. Do you know how to make it smaller for shot code like?
"$ Docker version 20.10.2, build 2291f61"
When i try to embed it shows me a lot of blank space down the text.
Hi Sasha! -- I don't suppose you could post an example of the code or method you used to pull that off, could you? -- I'm hoping to do something similar. Would love to see the example code block, iframe target, etc.
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.
I'd like to mention that I would also love this feature! It would greatly enhance our code snippet readability.
Oh, looks like I've already commented on this thread. Well, it's certainly still a need of ours!
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!