Simply put:
It's not possible.
If content is displayed in a browser (client side) or visible to the user, it can be downloaded somehow. When a web page is visible, it means the HTML code has been executed and can be inspected or viewed as source code.
The 'tricky' solution:
You can try to disable the context menu and certain keys like this:
<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
<script>
document.onkeydown = function (e) {
if (event.keyCode == 123) {
return false;
}
if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
return false;
}
if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
return false;
}
if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
return false;
}
if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
return false;
}
}
</script>
</body>
However, if someone is determined to access your code, they could simply disable JavaScript rendering these restrictions ineffective.
A more practical approach:
You can minify your code. While this won't conceal your code completely, it will make it more challenging for people to copy specific parts. You can use tools like:
You may also add extra spaces so the code isn't immediately visible unless scrolled right, although this is not recommended.
The bottom line:
Avoid attempting to hide code. Instead, consider using images - otherwise, people can still find a way to copy it despite any efforts to prevent it.