This is an example of a syntax-highlighted textarea. The textarea, almost completely transparent except for the caret-color, is positioned on top of the syntax-highlighted block using z-indexes, and the result is synchronised whenever the user enters code.
I have covered this technique in an article for CSS-Tricks, and have further edited it to include suggestions from comments.
One comment suggested creating a custom element for editable syntax-highlighted code, and I thought that was a very good idea, so you can find the custom element demo I created here.
Syntax Highlighting by Prism.js
Font from Google Fonts
Made by WebCoder49
Please feel free to use this technique as inspiration!
Link : https://gist.github.com/Austin-Sebastian/6b1ab6965c486437ce3f122370a45c71
المشاركات
