Forum Discussion
Color Syntax Highlighter for Code Snippet
Hi Michelle, It's been a long time since your comments were posted, but I am having the same problem you noted 3 years ago. Have you found any solutions to the "We currently manually color text in paragraphs and numbered step blocks," or other resources? If you are still doing this work on Articulate, does Storyline offer any options?
Carrie
Hi Carrie, unfortunately we still manually color the text for the most part. I've since made some template blocks that have a black background and white text (for paragraphs/steps), but that's been the farthest I've gotten on this. Unfortunately, there haven't been any Rise features released to help with this since then, to my knowledge, either.
I haven't worked much with Storyline, but that could be somewhere to explore. I also looked at the new Custom Block feature in Rise, but unfortunately it didn't have anything to streamline code for how we use it in courses.
For longer code, we sometimes manage external GitHub links, but for snippets and single lines, we just have to do the additional work to manually color them otherwise.
I'd love to see some movement on this feature request in the future, though. It's been one of the most difficult parts of writing courses that deal with code for sure.
Custom/html block might be a good solution for this, I'll plan on putting together a sample. Will probably use highlight.js as a starting point. Question- are you using colors to recolor certain parts of the code each time, or are you highlighting specific parts of the code to emphasize for your learners?
I hadn't thought about the custom html block, that's a good idea! I will say I haven't had a chance to test out that new block type, but it does seem like a useful recent addition that was added.
So because of time I haven't been able to highlight syntax to match the IDE for each step. Right now, I just have a simple black background and white text to indicate I'm teaching about code. Ideally, if that were converted to a code style within the text, that would be the best outcome. Here's an example of a step with the manually colored parts (and I usually follow it by a screenshot of what it looks like in an IDE too):Ideally, the screenshot of the code would be replaced with a code block if it could keep the formatting, though. It would be great to be able to show the color syntax like an IDE so it's easier to read, but also highlighting the line in a longer block of code would eliminate the need to just have a screenshot of its placement in the code.
And then this is an example use of what I currently do in the paragraph block:
So essentially, I'm looking for ways to embed that syntax color highlighting in various block types like paragraphs or steps, but also just having the basic code block to include the syntax coloring would make those blocks usable as well.
Thank you, Michelle. So to manually color the text do you go to inspect and change it from there? I am not a coder nor do I know html. I did that successfully, but it changes all the text to one color :( I don't know how to add additional colors.
So I ended up just not even using the code snippet blocks altogether, since I wasn't able to successfully color those blocks. Instead, I just use a paragraph block or a numbered list block and manually color it from there. I just posted a couple of examples above in my reply to Phil that you can see!
