Bagaimanakah saya boleh menambah nombor baris pada kawasan teks HTML?

Menambah Nombor Baris pada HTML Textarea: Panduan

Apabila berurusan dengan elemen dalam HTML, memaparkan nombor baris bersama teks boleh menjadi ciri yang berharga untuk kebolehbacaan dan ketepatan penyuntingan. Mari kita terokai penyelesaian menyeluruh untuk tugas ini.</p> <p><strong>CodeMirror</strong></p> <p>Alat yang paling disyorkan untuk menambah nombor baris pada textarea ialah CodeMirror. Ia adalah perpustakaan JavaScript sumber terbuka popular yang menyediakan pelbagai ciri untuk penyuntingan teks. Untuk menggunakan CodeMirror, cuma masukkan pustaka dan nyatakannya dengan pilihan yang sesuai.</p> <p><strong>Demo Langsung</strong></p> <p>Berikut ialah demo yang berfungsi yang menggambarkan penggunaan CodeMirror untuk penomboran baris:</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>Petua Tambahan</strong></p> <p>Jika anda menghadapi masalah dengan nombor talian yang tidak sepadan dengan garisan sebenar, ada kemungkinan titik monitor anda setiap inci (DPI) ditetapkan lebih tinggi daripada 100%. CodeMirror mengambil kira perkara ini, tetapi penyelesaian lain mungkin tidak.</p> <p><strong>Kesimpulan</strong></p> <p>CodeMirror ialah penyelesaian yang boleh dipercayai dan berkuasa untuk menambah nombor baris pada kawasan teks dalam HTML. Ia menyediakan pelbagai pilihan penyesuaian dan disepadukan dengan lancar dengan elemen HTML.</p><p>Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah nombor baris pada kawasan teks HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Adakah Anda Benar-benar Memerlukan Petikan untuk Nama Keluarga Font dalam CSS?" href="http://m.php.cn/ms/faq/1796685457.html">Adakah Anda Benar-benar Memerlukan Petikan untuk Nama Keluarga Font dalam CSS?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Adakah Anda Benar-benar Memerlukan Petikan untuk Nama Keluarga Font dalam CSS?" href="http://m.php.cn/ms/faq/1796685494.html">Adakah Anda Benar-benar Memerlukan Petikan untuk Nama Keluarga Font dalam CSS?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/1796685940.html" title="Bagaimana Saya Boleh Memilih Elemen Kanak-Kanak ke-1 Tanpa Mengetahui Ibu Bapa?" class="aBlack">Bagaimana Saya Boleh Memilih Elemen Kanak-Kanak ke-1 Tanpa Mengetahui Ibu Bapa?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796685980.html" title="Bagaimana untuk Mencegah Limpahan Teks dalam Pengepala Jadual Pusing Menegak?" class="aBlack">Bagaimana untuk Mencegah Limpahan Teks dalam Pengepala Jadual Pusing Menegak?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796685984.html" title="Mengapa Saya Tidak Boleh Menggunakan Fon @font-face daripada Subdomain dalam Firefox?" class="aBlack">Mengapa Saya Tidak Boleh Menggunakan Fon @font-face daripada Subdomain dalam Firefox?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796685790.html" title="Bagaimana untuk Membuat Pemilih nth-Child Abaikan Elemen Tersembunyi dalam Susun Atur Grid?" class="aBlack">Bagaimana untuk Membuat Pemilih nth-Child Abaikan Elemen Tersembunyi dalam Susun Atur Grid?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796685927.html" title="Bagaimana untuk Membuat Sempadan Separuh Telus dalam CSS Tanpa Menggunakan Imej?" class="aBlack">Bagaimana untuk Membuat Sempadan Separuh Telus dalam CSS Tanpa Menggunakan Imej?</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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/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>