Wie kann ich einem HTML-Textbereich Zeilennummern hinzufügen?

Zeilennummern zu HTML-Textarea hinzufügen: Eine Anleitung

Beim Umgang mit Elemente in HTML kann die Anzeige von Zeilennummern neben dem Text eine wertvolle Funktion für die Lesbarkeit und Bearbeitungsgenauigkeit sein. Lassen Sie uns eine umfassende Lösung für diese Aufgabe erkunden.</p> <p><strong>CodeMirror</strong></p> <p>Das am meisten empfohlene Tool zum Hinzufügen von Zeilennummern zu Textbereichen ist CodeMirror. Dabei handelt es sich um eine beliebte Open-Source-JavaScript-Bibliothek, die zahlreiche Funktionen zur Textbearbeitung bietet. Um CodeMirror zu verwenden, schließen Sie einfach die Bibliothek ein und instanziieren Sie sie mit den entsprechenden Optionen.</p> <p><strong>Live-Demo</strong></p> <p>Hier ist eine funktionierende Demo, die die Verwendung von CodeMirror für die Zeilennummerierung veranschaulicht:</p> <pre class="brush:php;toolbar:false">var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', theme: 'abbott', });</pre> <pre class="brush:php;toolbar:false"><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css"> <textarea></pre> <p><strong>Zusätzlich Tipps</strong></p> <p>Wenn Sie Probleme mit Zeilennummern haben, die nicht mit den tatsächlichen Zeilen übereinstimmen, ist es möglich, dass die Punkte pro Zoll (DPI) Ihres Monitors auf mehr als 100 % eingestellt sind. CodeMirror berücksichtigt dies, andere Lösungen jedoch möglicherweise nicht.</p> <p><strong>Fazit</strong></p> <p>CodeMirror ist eine zuverlässige und leistungsstarke Lösung zum Hinzufügen von Zeilennummern zu Textbereichen in HTML. Es bietet eine Reihe von Anpassungsoptionen und lässt sich nahtlos in HTML-Elemente integrieren.</p><p>Das obige ist der detaillierte Inhalt vonWie kann ich einem HTML-Textbereich Zeilennummern hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">this</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Benötigen Sie wirklich Anführungszeichen für Schriftfamiliennamen in CSS?" href="http://m.php.cn/de/faq/1796685457.html">Benötigen Sie wirklich Anführungszeichen für Schriftfamiliennamen in CSS?</a></span><span>Nächster Artikel：<a class="dBlack" title="Benötigen Sie wirklich Anführungszeichen für Schriftfamiliennamen in CSS?" href="http://m.php.cn/de/faq/1796685494.html">Benötigen Sie wirklich Anführungszeichen für Schriftfamiliennamen in CSS?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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="http://m.php.cn/de/faq/1796685927.html" title="Wie erstelle ich einen halbtransparenten Rahmen in CSS, ohne Bilder zu verwenden?" class="aBlack">Wie erstelle ich einen halbtransparenten Rahmen in CSS, ohne Bilder zu verwenden?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796685940.html" title="Wie kann ich das n-te untergeordnete Element auswählen, ohne das übergeordnete Element zu kennen?" class="aBlack">Wie kann ich das n-te untergeordnete Element auswählen, ohne das übergeordnete Element zu kennen?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796685944.html" title="Wie verhindert man die Vererbung untergeordneter Elemente in CSS?" class="aBlack">Wie verhindert man die Vererbung untergeordneter Elemente in CSS?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796685790.html" title="Wie kann man dafür sorgen, dass der n-te untergeordnete Selektor versteckte Elemente in einem Rasterlayout ignoriert?" class="aBlack">Wie kann man dafür sorgen, dass der n-te untergeordnete Selektor versteckte Elemente in einem Rasterlayout ignoriert?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796685901.html" title="Wie kann man in CSS eine Gleitanimation erstellen, wenn das animierte Element „display: none;“ hat?" class="aBlack">Wie kann man in CSS eine Gleitanimation erstellen, wenn das animierte Element „display: none;“ hat?</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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/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>