Code Editor inside a bootstrap tab

[fatocwb]

Hello, I'm not a expert at programming yet, so I'm facing the problem that the code editor works fine outside the section that implements bootstrap tabs. However inside the tab Javascript the code editor don't run, just stays a white screen in this tab.
The piece of code that implements the tab:
<div class="tab-pane fade" id="nav-javascript" role="tabpanel" aria-labelledby="nav-javascript-tab" tabindex="0"> <textarea id="javascript-code"> function foo(items) { var x = "All this is syntax highlighted"; return x;} </textarea> </div>
The complete code is here: https://codepen.io/F-T-the-animator/pen/dyEpNKv
Thanks.

[nightwing]

Did you manage to find a solution?

[fatocwb]

Hello, yes. The problem was that you can not put the id inside the textarea because it gives some conflict. You must put the id inside a div, then with style.css make the style and positioning of the editor. The textarea I used to sync the tag textarea and tag div to display the final result.
Here the block:
<div class="tab-pane fade" id="nav-css" role="tabpanel" aria-labelledby="nav-css-tab" tabindex="0"> <textarea id="css-code" class="css-code" style="display:none;"> </textarea> <!-- resulta no editor --> <div id="editor-css"> </div> </div>
Here the style to ids:
<style type="text/css" media="screen"> #editor-html, #editor-css, #editor-javascript { height: 400px; } </style>
If you was not able to do I share the complete code.