Type in span/div respecting breakline and then transform to pre

Hello. I'm facing a situation here (studying purpose) where I type in a textarea and onkeyup it will copy the text to a span or div and after it, it will turn the component into a pre to use syntaxhighlighter.

I found out that I can change the breakline by replacing the text breakline (/\n/g,'&#x000D;') i can change the modifier to break it, but if I add <br/> there, the syntaxhighlighter will show the <br/> and not jump to the next line.

I tried with text() and html(), and after render it in the page, I will call SyntaxHighlighter.highlight(); and the code will be transformed again.

here's what I done until now:

1. <script type="text/javascript">
2.     // <![CDATA[       
3.         function copiarIdentar() {
4.             $vn = '<pre class="brush: java">' + $('#codigo-escrito').val().replace(/\n/g, '&#x000D;') + '</pre>';
5.             $('#codigo-identado').html($vn);
6.             SyntaxHighlighter.highlight();
7.         }
8.     // ]]>
9.     </script>
10.     <h:panelGroup layout="block" id="codigo-identado"></h:panelGroup>
11.     <h:form prependId="false">
12.         <p:inputTextarea value="#{compilador.codigo}" id="codigo-escrito" onkeyup="copiarIdentar()" />
13.         <p:commandButton value="Compilar" />
14.     </h:form>

It works, but it doesn't respect breakline, so, if I type 50 lines, it will show all in 1 line

• Topic Participants

• arfmoraes

• nigelhilluk