Comment ajouter des numéros de ligne à une zone de texte HTML ?

Affichage des numéros de ligne dans une zone de texte HTML

Lorsque vous travaillez avec une zone de texte élément, il peut être avantageux d'afficher les numéros de ligne le long de sa marge gauche pour améliorer la lisibilité du code et le débogage.</p> <p><strong>CodeMirror comme solution</strong></p> <p>CodeMirror est une puissante bibliothèque d'éditeur de code qui peut être exploité pour ajouter des numéros de ligne à une <textarea>. Sa documentation complète fournit des conseils détaillés pour sa mise en œuvre.</p> <p><strong>Démo d'implémentation</strong></p> <p>Une démo entièrement fonctionnelle peut être trouvée dans le bac à sable StackOverflow :</p> <pre class="brush:php;toolbar:false">var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', theme: 'abbott', });</pre> <p><strong>Ressources supplémentaires</strong></p> <p>Pour plus d'assistance et d'options de personnalisation, reportez-vous à ce qui suit ressources :</p> <ul> <li>Documentation CodeMirror : https://codemirror.net/doc/</li> <li>CSS pour CodeMirror : https://codemirror.net/doc/manual.html#styling</li> </ul><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">https</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Astuce Tailwind : Gérer une longue liste de classes utilitaires dans une seule ligne de code" href="https://m.php.cn/fr/faq/1796684561.html">Astuce Tailwind : Gérer une longue liste de classes utilitaires dans une seule ligne de code</a></span><span>Article suivant：<a class="dBlack" title="Astuce Tailwind : Gérer une longue liste de classes utilitaires dans une seule ligne de code" href="https://m.php.cn/fr/faq/1796684613.html">Astuce Tailwind : Gérer une longue liste de classes utilitaires dans une seule ligne de code</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/841.html" title="Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS" class="aBlack">Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/961.html" title="Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience" class="aBlack">Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1345.html" title="Analyse détaillée de l'utilisation du chapiteau" class="aBlack">Analyse détaillée de l'utilisation du chapiteau</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>