Picture of Kristian Kjelmann
Using highlight.js (code highlighting) or similar in Adapt framework
by Kristian Kjelmann - Monday, 10 August 2020, 9:40 AM
 

Hi!

I have recently started using the Adapt Authoring Tool (the GUI/framework). Really liking it!

I am currently trying to convert a course website to an Adapt e-course (example draft page from website here: https://caldiss-aau.github.io/workshop_python-intro/fundamentale/typer/).

The course is an introduction to Python programming and contains a lot of coding examples. The website is created using Hugo (https://gohugo.io/) with a theme using the highlight.js script (https://highlightjs.org/) for code highlighting. I would like to replicate that in the Adapt e-course.

 

So far my best solution has been to create CSS classes for code to be highlighted but it requires a lot of extra manual work as I have to edit all the existing HTML tags. As I already have the HTML I would prefer a way to just copy the source HTML over into Adapt and have it convert correctly. I assume this requires to have the highlight.js script somewhere in Adapt but I have no clue how to set that up.

 

Any suggestions/ideas? I am very much a novice in CSS/HTML and have mostly worked with markdown documents.

 
Reply
Picture of Matt Leathes
Re: Using highlight.js (code highlighting) or similar in Adapt framework
by Matt Leathes - Monday, 17 August 2020, 4:38 PM
 

Hey Kristian

I know someone has built a textWithCode plugin in the past that allows for code highlighting but I'm not sure how much that will help you here, except as a demo of how such a thing might be built. Equally there's the mathJax extension which does something similar but at a global level so can be used anywhere rather than in one specific component.

Do you need to build this in the Authoring tool? Reason I ask is that I have a feeling the text editor in the authoring tool has a habit of meddling with HTML, at least according to this thread. So even if you were to get highlight.js working (which will probably require building an extension to load it in) it might be that you can't just copy and paste the HTML in... which definitely wouldn't be a problem if building in the Framework as you'll be editing the JSON files directly.

 
Show parent | Reply