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ätzliche Tipps</strong></p> <p>Wenn Sie Probleme damit haben, dass die Zeilennummern nicht mit den tatsächlichen Zeilen übereinstimmen, ist es möglich, dass die Punkte pro Zoll Ihres Monitors fehlerhaft sind (DPI) ist höher als 100 % eingestellt. 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="https://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="https://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="https://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="https://m.php.cn/de/faq/841.html" title="Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen" class="aBlack">Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/961.html" title="So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch" class="aBlack">So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1345.html" title="Detaillierte Nutzungsanalyse von Marquee" class="aBlack">Detaillierte Nutzungsanalyse von Marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>