Sintax highlight for code questions: Mark the words, Drag Text, Multiple Choice, Fill in the blanks
Dear H5P team,
I find your work an excellent leap forward in interactivity, inmediate feedback and visual apeal for on-line learning platforms activities. To me H5P is the way to go. Thank you sincerely for your dedication.
That said that, a great improvement in H5P for my field, Computer Science, would be to have an optional source code syntax highlight filter for text. This way for programming courses we can put code directly into activities, with a colorful syntax highlight that makes the code more readable for students, and take advantage of activity types such as: Mark the words, Drag Text, Multiple Choice or Fill in the blanks, for instance.
An alternative to this syntax highlight filter, would be to have the option of html input, so that using online highligthers as resurchify (that generate higlighted and beautified code using thml tags) cab be a valid solution; actually at this moment, see myself forced to keep using moodle standard questionaires, since it allows html text in questions.
Thanks again, and best regards,
Tue, 08/16/2022 - 12:28
Rough solution using highlight.js
An example rendering is attached. You need highlight.js and must include its files and the attached highlighting code at the end of the H5P content HTML file (if you have many of them, consider injecting them programmatically).<link rel="stylesheet" href="highlight-default.min.css"/>
Some tweaks to the CSS are necessary to avoid large padding or mismatching background colors.