Sintax highlight for code questions: Mark the words, Drag Text, Multiple Choice, Fill in the blanks

Submitted by democrito on Sat, 05/07/2022 - 23:21
Forums: 
Feature requests

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,
Oscar

Content types: 
Drag the Words
Fill in the Blanks
Mark the Words
Multiple Choice
2
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network

gulp21

Tue, 08/16/2022 - 12:28

I wanted to have syntax highlighting within my H5P content as well, so I wrote some JavaScript which looks for markdown-style code blocks within the content and applies syntax highlighting to them. The code does not work with all content types, has some bugs, and the solution is not the best, but may be a good starting point for others until there is official support. I only tested modifying the HTML export of the Lumi editor.

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"/>
<script src="highlight.min.js"></script>
<script src="h5p-highlighting.js"></script>

Some tweaks to the CSS are necessary to avoid large padding or mismatching background colors.

Attachments: 
Plain text icon h5p-highlighting.js_.txt
Image icon before.png
Image icon after.png