The question is how to make a field for the code on the site, this is already implemented in libraries as I understand it?

console.log('Поле с кодом, как тебя звать'); //на подобии такого поля, я просто не знаю как это даже называется

I will be glad to any help. any hints, at least as it is called. Thank!

Specifically, this field is of interest with numbering, and with the button select all, and with highlighting Field of interest

The tip was used by highlight.js. Who will tell you how to use it? It seems to have done as it is written, but something is not all the same.

 $(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }); 
 <html> <head> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script> </head> <body> <pre><code class="html"> <form action="" method="POST"> <input type="text" name="name" value="test"/> <input type="submit" name="button" value="button"/> </form> </code></pre> </body> </html>

  • Please register - attach a screen, what do you want to see. I thought about syntax highlighting and answered. Then deleted because you might need a code editor? - Goncharov Alexander
  • @GoncharovAleksandr, yes it is with syntax highlighting, specifically html is interested. And there are who do a little auto-editing, do the indents interest? Now I will attach - Vladimir Alexandrov
  • highlightjs.org . About indents - this is called "autoforming" - it seems to be there too, but I will not tell you anything specifically: most likely this functionality is built into such plugins. - Goncharov Alexander
  • @GoncharovAlexander, thanks for the help! I would be even more grateful if you can help me deal with it) The code attached in the question that something is not right there ... - Vladimir Alexandrov
  • one
    ru.wordpress.org/plugins/crayon-syntax-highlighter , ruseller.com/lessons.php?rub=28&id=1855 , <code></code> - HamSter

1 answer 1

You need to escape html with &lt; &gt; or using jQuery to translate html to text:

 $(document).ready(function() { $('pre code').each(function(i, block) { $(block).text($(block).html()); hljs.highlightBlock(block); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css"> <pre><code class="html"> <form action="" method="POST"> <input type="text" name="name" value="test"/> <input type="submit" name="button" value="button"/> </form> </code></pre>

  • And is there an opportunity to add a function, or manually adding certain operators to the line to move the line and indent? if we have a code in one line, then it is displayed in a line - Vladimir Alexandrov