Greasy Fork is available in English.

Kanka Preserve HTML Entities in Summernote

Checks PRE and CODE tags in Summernote and ensures that their contents use HTML entities for proper display.

Penulis
Salvatos
Pemasangan harian
0
Total pemasangan
4
Nilai
0 0 0
Versi
2
Dibuat
06 Desember 2022
Diperbarui
10 Januari 2023
Lisensi
MIT
Berlaku untuk

Important: Versions 1 to 2 should be considered experimental and may lead to data loss. Back up your entries before saving (this backup script can help with that).

This script checks PRE and CODE tags in the Summernote editor when it loads and ensures that any HTML tags they contain are written with HTML entities for proper display, mainly by replacing < and > characters. The clearest way to explain why this is useful is probably to explain why showing HTML tags in Kanka entries is difficult in the first place:

  1. Kanka runs an HTML validator and filter on everything you submit. When you save an entry, plain HTML tags inside PRE and CODE tags get interpreted as actual HTML elements and rendered in weird ways (for example, <pre><p>text</p></pre> results in the paragraph being rendered outside the PRE block instead of shown inside it as markup; and if you try to show just an opening tag like <code><span></code>, it gets replaced with <code><span></span></code> because the validator wants all tags to be closed, which doesn’t display anything on the rendered page).
  2. The only solution around this is to use HTML entities instead of angle brackets, so &lt; for < and &gt; for >, e.g. <code>&lt;span&gt;</code>. When the page is rendered, these are resolved to their respective characters, so you get what you want. But...
  3. When you edit that entry again, Summernote also resolves HTML entities to their respective characters, so you end up with plain HTML tags in your code again, and if you save without changing them all back, you’re back to square one.

Hence, this script solves part 3 of the issue by undoing Summernote’s conversion of HTML entities inside PRE and CODE tags specifically. It does not validate HTML before saving, so you are still responsible for using HTML entities in the first place. Various HTML entity converters on the Web can help make that step easier.

If you write CSS or programming language code in PRE or CODE tags, note that the  <  and  >  comparison operators (or CSS child selector, in the latter’s case) will be excluded from replacement as long as they are surrounded by spaces, so you can still display them properly. If you run into other characters that should not be converted to HTML entities, please let me know.


If my scripts are making your life easier, please consider tipping via Ko-fi (no account needed):

Support me on Ko-fi.com