Question

我正在尝试设置Entry代码的样式，而不会阻止用户正确地突出显示和复制代码。

我希望这样做的方式（见下文）仅适用于第一行，并且不会重演。

我确信这可以使用JavaScript工作，但我不确定没有大量处理的最佳方法是什么。

＆＃13;

public function handle($request, Closure $next)
{
    if ($this->auth->check())
    {
        return new RedirectResponse(url('/home'));
    }

    return $next($request);
}

＆＃13;

redirect(base_url().'index.php/voucher/list_vouchers/'.$this->session->userdata('id'), 'refresh');

＆＃13;

我能达到类似效果的最佳方式是什么，但跨越每一行？如果可能的话，我正在寻找一种vanilla JavaScript方法。

Answer 1

如果您不想将每一行包装在自己的标签中，您可以尝试类似于这个答案的背景图像技术：

styling each line inside pre with css

http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM

更新：添加了代码示例

body {
  font-family: sans-serif;
}

code, pre {
  background: #e5f3ff;
}

code.styled,
pre.styled {
  display:block;
  font:normal 12px/22px Monaco,Monospace !important;
  color:#000;
  background-color:#e5f3ff;
  background-image:radial-gradient(circle at 50%, #333 0%, #333 10%, #e5f3ff 20%);
  background-size: 22px 22px;
  background-repeat: repeat-y;
  padding:0em 20px;
  overflow:auto;
}

<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

Answer 2

这是一个纯粹的JavaScript解决方案

var _pre = document.querySelector("pre.styled");
_pre.innerHTML="<span class='line'>"+(_pre.textContent.split("\n").filter(Boolean).join("</span>\n<span class='line'>"))+"</span>";

body {
  font-family: sans-serif;
}

code, pre {
  background: #e5f3ff;
}

code.styled,
pre.styled {
  display: block;
  padding: 8px;
  margin: 8px 0;
  overflow-x: auto;
}

code.styled .line::before,
pre.styled .line::before {
  content: "–";
  padding-right: 8px;
}

<p>This is an example of using <code>::before</code> to add content,<br>
and still being able to highlight/copy text without copying prefix.</p>
<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

这是如何工作的：我们将textContent从pre检索为字符串，split将字符串转换为行数组，filter将空行和join行重新排列在一起每个都在span。

Answer 3

如何使用一些javascript来换行每个行并设置样式：

$('pre.newline').each( function() {
  var text = $(this).text().split('\n');
  $(this).html('')

  for(var i = 0; i <  text.length; i++) {
    $(this).append( $('<span>').html( text[i] ) );
  }

  $(this).html(html)
})

设置范围display:block

的样式

pre.newline span::before {
  content: "–";
  padding-right: 8px;
}

pre.newline span {
  display: block;
}

Answer 4

这是一个示例脚本

var pre = document.querySelector('.styled');
var lines = pre.textContent.trim().split('\n');
var newlines = '';
for (var i = 0; i < lines.length;i++) {
  newlines += "<pre class='styled'>" + lines[i].trim() + "</pre>"
}
pre.insertAdjacentHTML('afterend', newlines);
pre.parentElement.removeChild(pre);

body {
  font-family: sans-serif;
}

code, pre {
  background: #e5f3ff;
}

code.styled,
pre.styled {
  display: block;
  padding: 2px;
  margin: 0;
  overflow-x: auto;
}

code.styled::before,
pre.styled::before {
  content: " -";
  padding-right: 8px;
}

<p>This is an example of using <code>::before</code> to add content,<br>
and still being able to highlight/copy text without copying prefix.</p>
<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

将内容添加到每行的开头，例如:: before for first line

4 个答案: