Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

Question

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

I am currently working on customizing the appearance of my <code>/<pre> tags while ensuring that users can still easily highlight and copy the code.

The method I had in mind (shown below) only applies to the first line and doesn't repeat for subsequent lines.

I believe this could be achieved with JavaScript, but I'm unsure about the most efficient way to do so without excessive processing.

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::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>

Is there a more effective approach to achieving a similar effect across all lines? I am specifically interested in a vanilla JavaScript solution if feasible.

javascript html css

Answer 1

Answer №1

Check out this neat solution using only 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>

Here's how it works: By extracting the textContent from pre as a string, we are able to split the string into an array of lines, then filter out any empty lines before finally joining the lines back together by enclosing each in a span.

Answer 2

Check out this neat solution using only 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>

Here's how it works: By extracting the textContent from pre as a string, we are able to split the string into an array of lines, then filter out any empty lines before finally joining the lines back together by enclosing each in a span.

Answer 3

Answer №2

If you prefer not to enclose each line in its own tag, an alternative option is to utilize a background image technique akin to the one outlined in this response:

styling each line inside pre with css

UPDATE: included code snippet

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-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='3' fill='green' stroke='black' stroke-weight='1' /></svg>");
  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 4

If you prefer not to enclose each line in its own tag, an alternative option is to utilize a background image technique akin to the one outlined in this response:

styling each line inside pre with css

UPDATE: included code snippet

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-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='3' fill='green' stroke='black' stroke-weight='1' /></svg>");
  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 5

Answer №3

One way to achieve this effect is by using a simple JavaScript function to wrap each line of text with span elements and style them accordingly:

$('.text-block').each( function() {
  var lines = $(this).text().split('\n');
  $(this).html('');

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

  $(this).children('span').css('display', 'block');
})

You can then use CSS to further style the spans, such as adding a custom bullet before each line:

.text-block span::before {
  content: "-";
  padding-right: 8px;
}
.text-block span {
  display: block;
}

Answer 6

One way to achieve this effect is by using a simple JavaScript function to wrap each line of text with span elements and style them accordingly:

$('.text-block').each( function() {
  var lines = $(this).text().split('\n');
  $(this).html('');

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

  $(this).children('span').css('display', 'block');
})

You can then use CSS to further style the spans, such as adding a custom bullet before each line:

.text-block span::before {
  content: "-";
  padding-right: 8px;
}
.text-block span {
  display: block;
}

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

Answer №1

Answer №2

Answer №3

Similar questions

At what point is ng-if triggered?

Find distinct elements in an array of objects

Submit a POST request using CoffeeScript to get a string from the returned object

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

Trimming content within an editable div in JavaScript: A guide

What are the steps to create offline documentation for sails.js?

Is it possible for me to add some PHP code to the action of a form?

Struggling with my jQuery Ajax call, need some help

What is the best way to display rows in alternating red and green colors?

axios interceptor - delay the request until the cookie API call is completed, and proceed only after that

Tips for modifying the icon of a div with a click event using vanilla JavaScript

Leverage the power of PHP files within your JavaScript code

Display the HTML content once the work with AJAX and jQuery has been successfully finished

Encountered a TypeError in React 16.7: The function (0, _react.useState) is not recognized

Organize chat messages based on date using JavaScript

Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

Eliminate the jQuery AJAX timestamp from the URL parameters

The functionality of CSS transform appears to be malfunctioning on Firefox browser

Problem with Express.js serving dynamically generated index.html page

Learn how to dynamically insert an element into an angular scope using a click event