Is there a way to visually indicate when a line is broken in HTML code displayed with code or pre elements using an icon, similar to how it's done in VS2019 (shown in the screenshot)? I believe this can be achieved through CSS styling, but I'm looking for a simple solution. Any ideas?
Here is a creative solution using mostly CSS, with minimal JavaScript required for splitting content on hard line breaks. The CSS variable can be customized or adapted for legacy browser support.
const target = document.querySelector('#target')
const lines = target.textContent.split('\n').map(str => {
const div = document.createElement('div')
div.classList.add('line')
div.textContent = str
return div
})
target.textContent = ''
lines.forEach(line => target.appendChild(line)):root {
--line-height: 20px;
}
#target {
white-space: pre-wrap
}
.line {
display: flex;
padding-right: var(--line-height);
line-height: var(--line-height);
position: relative;
}
.line:nth-child(odd) {
background: #f8f8f8;
}
.line::after {
content: '';
position: absolute;
right: 0;
height: calc(100% - var(--line-height));
background-repeat: repeat-y;
background-size: var(--line-height) var(--line-height);
width: var(--line-height);
font-weight: bold;
color: #269;
opacity: .3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg%3E%3Crect fill='none' id='canvas_background' height='42' width='42' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Cpolygon id='svg_1' points='16.397236347198486,20.219151496887207 9.397236347198486,25.219...
}<pre id="target">Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Debitis vero dolorem officia omnis nulla molestiae perferendis sequi illo.
Molestiae error inventore perspiciatis maxime?
At, illum!
Cupiditate consequuntur harum minima perferendis recusandae alias, rem, vitae...</pre>We operate multiple websites, each referencing 3-5 CSS files. Some of these files are shared across sites while others are specific to certain pages. Our aim is to streamline the CSS structure by consolidating into fewer files without altering the end res ...
I am currently working with Bootstrap and have created a list as shown below: https://i.sstatic.net/PqBip.png The active state of this list item is blue, but I would like to change it to green or another color. Here is the code snippet: <a class="l ...
UPDATE: Successfully resolved the issue by avoiding absolute file paths (../Images\City of Bath College Logo.jpg). 2nd UPDATE: Also implemented the same fix for the CSS file and now it functions "the HTML way". I'm encountering a problem displa ...
I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed... The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle mul ...
I am currently working with this jquery code that appends content to a specific div: $("#destinations ul").append('<li>' + '<h2>' + destination[i].city + '</h2>' + '<p>&ap ...
Here is a snippet of HTML code that I am working on: <span id="spanId" class="myThumbnails"> <div class="Thumbnail" style="margin-bottom:12px;text-align:center;"> <img id="thumbl00_cph_Img1" style="border-width:0px;" src="http:/ ...
I want to implement a functionality on my screen where the Previous button is hidden initially and only becomes visible when the user clicks the Next button. I have set the CSS property for the Previous button to hide it by default, but despite using an if ...
Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...
Just starting out with CSS and running into some issues. I'm attempting to create a solid colored top bar similar to the black bar at the bottom of this page. However, instead of the color extending from the borders of the page, it's creating a b ...
I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div co ...
If the answer is already out there somewhere, I would really appreciate a link because I just can't seem to find it. When loading .php pages, I either include 'header.php' directly with <?php include 'header.php'; ?> or on ...
Having trouble triggering Bootstrap's navbar with plain JavaScript/jQuery while using Bootstrap 3.3.6 and jQuery 1.11.3. The data structure provided for my application cannot be modified in terms of adding classes or ids. <ul> <li ...
I have a rather extensive JSON file that I'm looking to randomize and display in limited quantities within an HTML list item. The file contains over 100 items, but I only want to showcase ten at any given time. While I acknowledge that implementing pa ...
I recently developed a piece of code to ascertain whether a value in the database is null or not. Here's the snippet: var table; var active = false; function CheckActive(table){ this.table = "table" + table + ""; var db = window.openDatabas ...
Check out how my desktop page looks: Desktop version If you want to see how it should appear on mobile, click here: Mobile Version This is the HTML/CSS code for the desktop version, and everything seems to be working fine. .skills { width: 80%; ba ...
My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...
I'm having trouble getting min-height to work properly. The issue is that my child element doesn't inherit the height of its parent, so it's not setting its own height correctly. How can I resolve this? #middle_Wrapper { width: 100%; mi ...
In a simple colorbox that I have loaded, I am using the following code: $.colorbox({html: $('#widget-login').html()}); Within the colorbox, there is a form consisting of an input field and a label: <form name="f-login" id="f-login" action=" ...
I am currently utilizing KendoPenel to showcase some information and I need to enlarge a specific panel and alter its color during the runtime if any issues are detected within the data. For expanding and selecting the panel, I have implemented the code b ...
I have been working on a PHP shopping cart project, and I have successfully implemented functionalities to add, remove, and update items in the shopping cart. However, I am facing a challenge with adjusting the quantity of items in the database when a user ...