I would like to have the visual representation of an HTML5 </code> tag indicate when there are \'hard\' newlines as opposed to wrapping. For example, g <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>2条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000031.jpg" alt=" 感动是毒 "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 感动是毒</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-01-13 23:01</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p><strong>Live Demo</strong></p> <pre><code><style type="text/css"> #myform textarea { border: 1px solid #000; position: absolute; } #myform #source { background: transparent; z-index: 1; } #myform #mirror { color: rgba(0,0,0,0.5); z-index: -1; } </style> <script type="text/javascript"> $("#source").keyup(function() { $("#mirror").val($("#source").val().replace(/\n/g,"¶\n")); }); </script> <form id="myform"> <textarea id="source" rows="10" cols="40">
</code> tag indicate when there are \'hard\' newlines as opposed to wrapping. For example, g <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>2条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000031.jpg" alt=" 感动是毒 "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 感动是毒</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-01-13 23:01</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p><strong>Live Demo</strong></p> <pre><code><style type="text/css"> #myform textarea { border: 1px solid #000; position: absolute; } #myform #source { background: transparent; z-index: 1; } #myform #mirror { color: rgba(0,0,0,0.5); z-index: -1; } </style> <script type="text/javascript"> $("#source").keyup(function() { $("#mirror").val($("#source").val().replace(/\n/g,"¶\n")); }); </script> <form id="myform"> <textarea id="source" rows="10" cols="40">
Note: Tested on Firefox 3.6.x only. (IE will need some different CSS for opacity)
加载中...