Hi, welcome to the ezSyntax page on GitHub. With ezSyntax, you can easily add syntax highlighting to your <code> blocks using one line of code.
Need help? Join the Discord!
Check out more info on ezsyntax.willm.xyz \ ゜o゜)ノ
If you find a bug or something not working right, please submit an issue!
- Allow users to change which programming language gets syntaxed (only HTML right now)
- Instead of having to use
syntax('demo', 1), have an option to apply to all<code>blocks
Submit a pull request if you'd like to contribute any of these features!
<!DOCTYPE html>
<html>
<head>
<script src="https://ezsyntax.willm.xyz/user/script.js"></script><script>
<script>
class codeEscape extends HTMLElement {
constructor() {
super();
const escapeHTML = (str) =>
str.replace(/[&<>'"]/g, (tag) => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[tag] || tag));
const shadow = this.attachShadow({ mode: 'closed' });
this.style.whiteSpace = "pre";
const res = `${escapeHTML(this.outerHTML)}`;
var text = document.createElement('code');
text.innerHTML = res;
shadow.appendChild(text);
setTimeout(function () {
const cElms = document.getElementsByTagName("code-escape");
[...cElms].map(element => syntax(element, "html"));
}, 10)
}
}
customElements.define('code-escape', codeEscape);
</script>
</head>
<html>
<body>
<div class="code" id="code" style="font-family: mono, arial, sans-serif;">
<code-escape class="test" style="white-space: pre;"><!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
</code-escape>
</div>
</body>
</html>Made with ❤ by Will M