How to refresh highlight without losing focus?

[André Vasko]

Hi there,

First, I would like to thanks for this very usefull library.

Second, I need to ask how can I type an text inside a code element and
the text be automatically highlighten on the fly? I already started
some code:
<pre width="500px">
<code width="500px" id="sqlInput" contenteditable="true">SELECT *
FROM table;</code>
</pre>

But the problem is when I alter the origin text, the new text is not
highlighten. So I have to call this Javascript function and I lose the
object's focus:
$('pre').each(function(i, e) {hljs.highlightBlock(e)});

This is a real problem because I cannot continue to type my SQL
sentence. Does anyone can help me?

Maybe there is a way of calling some other function that does not
steal the focus, or to save the focus and recover it later...

Thanks!

[Ivan Sagalaev]

On 04/13/2011 11:28 AM, Andr� Vasko wrote:
> Hi there,
>
> First, I would like to thanks for this very usefull library.

Hi! Thank you :-)

Unfortunately I can't really help you here� There probably should be
some way to get cursor position from a contenteditable block and then
set it back but I don't have any knowledge on this.

In fact I even doubt that using highlight.js for live highlighting is a
good idea because it would effectively replace the whole DOM sub-tree
inside the area on every change so it may be slow and suffer from visual
artifacts like flickering.

[André Vasko]

Hi Ivan,

I already did the automatically highlight and is not slow or flickering.

The only problem is that I lose the focus and came back to the beginnig of the filed, what is very anoing...

I'm doing some research about how the WYSIWG editors works, but I'm about to give up...

Thanks anyway...

VASKO

2011/4/15 Ivan Sagalaev <man...@softwaremaniacs.org>

On 04/13/2011 11:28 AM, André Vasko wrote:

Hi there,

First, I would like to thanks for this very usefull library.

Hi! Thank you :-)

Second, I need to ask how can I type an text inside a code element and
the text be automatically highlighten on the fly? I already started
some code:
<pre width="500px">
     <code width="500px" id="sqlInput" contenteditable="true">SELECT *
FROM table;</code>
</pre>

But the problem is when I alter the origin text, the new text is not
highlighten. So I have to call this Javascript function and I lose the
object's focus:
$('pre').each(function(i, e) {hljs.highlightBlock(e)});

This is a real problem because I cannot continue to type my SQL
sentence. Does anyone can help me?

Maybe there is a way of calling some other function that does not
steal the focus, or to save the focus and recover it later...

Unfortunately I can't really help you here… There probably should be some way to get cursor position from a contenteditable block and then set it back but I don't have any knowledge on this.

[Paul Jensen]

Hi,

I came across this post as I have been trying to do exactly what you did. Good news, I've found a way to do this.

Instead of trying to update the html of the <code> html element that you are editing, you have 2 <code> html elements, like this:

<pre>

  <code class="editor" contenteditable="true"></code>

  <code class="result"></code>

</pre>

The idea is to use CSS to place the code.editor element directly above the code.result element, and then to make the code.editor element transparent.

    pre {

      width 675px

      padding 0px

      font-family 'Menlo'

      font-size 8pt

      text-shadow none

      background none

    }

      code {

        position relative

        margin 0px

        height 282px

        outline none

      }

      code.editor {

        z-index 2

        background none

      }

      

      code.editor * {

        color rgba(255,255,255,0)

        background none

        text-shadow none

      }

      

      code.result {

        border solid 1px #333

        margin-top -295px

        z-index 1

        text-shadow none

      }

Next, you need to write some JavaScript that will insert the text from the code.editor element into the code.result element, and then call Highlight.js' highlightBlock function to syntax highlight the text contained in the code.result element.

jQuery(document).on('keyup', 'pre code.editor', function(event) {
  jQuery('pre code.result').html(this.innerText);
  hljs.highlightBlock(jQuery('pre code.result')[0],'  ', false);

});

Everytime we type a keystroke into the code.editor element, it puts that text into the code.result element, and then Highlight.js will apply syntax highlighting to the code.result element. This gives the visual impression that we are editing the code in a syntax-highlighted format, hence the syntax-highlighted text editor.

Hope that helps. For your information, I'm currently using this to build a feature for a realtime-dashboard web service that I plan to launch soon alongside the announcement of SocketStream version 0.3 at the London Node.js User Group in May. 

Regards,

Paul Jensen

[Ivan Sagalaev]

On 04/27/2012 02:13 PM, Paul Jensen wrote:
> <pre>
> <code class="editor" contenteditable="true"></code>
> <code class="result"></code>
> </pre>
>
> The idea is to use CSS to place the code.editor element directly above
> the code.result element, and then to make the code.editor element
> transparent.

Hi Paul,

That is a neat trick! We're slowly progressing on building a new site
for highlight.js and we're going to have an interactive demo there so
your solution might come handy.

On the other hand, things changed since the original mail was written,
so currently I would probably try to use the lower level
`highlightAuto`[1] instead of the `highlightBlock` for things like this.

[1]: http://softwaremaniacs.org/wiki/doku.php/highlight.js:api

[Aaron Stephens]

Hi all,

Just wondering if anybody has come up with a better solution for this?  It works great for simple highlighting, but gets all wonky as soon as you start adding things like bold or italics.

Thanks,

Aaron