HTML tags in course materials?

I am migrating the HTML 5 course from the groups format to the course format. How do I display HTML tags in the course materials? I have tried indentation and backticks.

https://p2pu.org/en/courses/2155/content/4126/

Hi @brylie,

I’ve been having a problem with the greater-than and lesser-than sign as well. The problem is that there is sanitisation that occurs on the text you enter, which replaces special characters with the HTML code, which renders correctly, except when within the <PRE> tags. At one point @dirk was looking into this problem, but for now, I think for now, your possible solutions would be to either host the content of the course somewhere else, or to include images of the code, or wait until @dirk has finished coming up with a new recommended platform for courses.

Regards,
Ralfe

Thanks for the summary @ralfe, that is spot on. I think it may be worth trying to fix this issue.

I’m trying to think of a shorter term solution and having a look at the relevant code. Here the cleaning of the content happens. I don’t know if it is easily possible to change how bleach cleans content?

Here the content gets converted back to HTML. Maybe if we use html5lib to find all pre tags and replace &gt; and &lt; back to > and <?

Hi @dirk,

I have looked into the bleach documentation, and I don’t see a solution involving only bleach. I think what will have to happen is that all PRE blocks will need to be extracted into a “staging area” array, and replaced with placeholders. Then after bleach has done its business, loop through and replace all the PRE blocks.

Regards,
Ralfe

I’ve gone old school on it and used regular expressions :smile:

Please have a look at this pull request and let me know if I’m opening up courses for any HTML or script abuse doing this?

Actually, "<pre>&lt;/pre&gt;&lt;script&gt;alert('foo');&lt;/script&gt;&lt;pre&gt</pre>" will break it :frowning:

Ok, I played with github comments while doing this and realized the problem isn’t with the &gt; in pre blocks, the problem is that somehow &gt; gets double escaped to become &amp;gt;. I think I actually knew that from looking at things last time. Please have a look at the pull request and let me know if there are still potential problems, clearly my mind is leaky.

1 Like

@dirk thanks for quickly identifying the issue. The pull request looks good :slight_smile:

Hi @dirk,

I only managed to get round to looking at the code now. I worry that this is only solving one of the “symptoms”, and that for other symbols (mathematical and other special characters) this solution might be insufficient. In a PRE block, you really don’t want to mess around with the contents, which is why I suggested temporarily extracting them from the markdown to preserve the original input.

Regards,
Ralfe

@dirk I hear what you say. Are there other symptoms that comes to mind right now or problems that the fix introduces? If not, this may be sufficient for now. Better a boat patched with duck tape than one at the bottom of the ocean :smile:

Hi @dirk,

Are you talking to yourself?

… sorry, couldn’t resist.

Ok, I took a look through the content I put together for my mathematics course and the only problem I can see is with the angular brackets. I somehow remember there being other problems, but it looks like I was wrong.

Will you please let us know once that update has taken place so I can go through and fix my content?

Thanks.

Regards,
Ralfe

It would seem like I do :smile:

I pushed through the fix, have a look at: https://p2pu.org/en/courses/1079/content/2283/, it seems to render correctly now.

@dirk,

YAY! Thanks so much. This was the page I was really worried about: https://p2pu.org/en/courses/1160/content/2466/ . And it is perfect now. Thanks very very much! You’re my hero :wink: haha

Regards,
Ralfe

Psst. @brylie . Check your content now.

Woohoo! Updating no content now :smiley:

The code blocks containing HTML work fine, but inline HTML is not working. The character entities are not being replaced:
https://p2pu.org/en/courses/2155/content/4126/

Similarly, code blocks with back ticks (```) around them are not replacing character entities, as in the first code block on the above page.