Giters

googlearchive / code-prettify

An embeddable script that makes source-code snippets in HTML prettier.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

using prettify.js to style editable code

htor opened this issue · comments

commented

i'm trying to incorporate prettify into an editor (a <pre contenteditable="true">...</pre>) on a web page. when using the .prettyprint class on this element and calling prettyPrint() the code is styled correctly, but when i edit some code, the styles are not applied correctly. i tried calling prettyPrint() on each keystroke but that's not working because it's too heavy and the HTML gets weird and nested. any idea what to do to solve this?

commented

See #268

Specifically this example using prettyPrintOne:
https://jsfiddle.net/amroamroamro/c64atxbu/

commented

thanks, didn't know that function existed. tried it, but the problem now is that it replaces all nodes in my editor and my cursor position is lost. in your example the code and the output are two separate elements, but in mine they are the same element. does prettify allow that?

commented

It's not really something code-prettify is concerned about, it's up to you to set that up.

The PR.prettyPrintOne function simply takes source code as input (with html-escaped special characters <, > and &) and return the syntax highlighted html text as output.

Many live editors including this one on GitHub I'm writing my answer in, or elsewhere like on Stack Overflow, use separate elements for code input and output. I assume having both as the same element only complicates things..

commented

thanks, i see. it's good that this module is focused on doing one thing well. i'm going for codemirror instead for syntax highlighting + editing.

p.s. it would be great if you linked/provided two js usage examples in the README for prettyPrint and prettyPrintOne so people know they exist and how to use them.