What is the method for including line numbers alongside a highlighted code section in highligh.js?

I want to ensure that the text rows are aligned perfectly with the numbers in the yellow vertical bar, without causing any issues with the mouse pointer as it moves across the rows. Adjusting margin or padding also affects the position of the mouse pointer.

ISSUE: The problem depicted in the image reveals a misalignment between the first and second rows and the numbers in the yellow column. The rows in the black panel occupy the empty spaces among the numbers in the yellow bar.

​ https://i.sstatic.net/PKKPt.png

HIGHLIGHT.JS: Ideally, I would prefer not to rely on the Highlightjs library for styling the text color in the code snippet. However, my attempts to remove Highlightjs introduced additional CSS that caused more empty space at the top of the black panel. Even when using Highlightjs, the alignment issue persists with an increased empty space.

If you are unfamiliar with Highlightjs, it's straightforward to use and is required to examine the provided solution. Below, you can find the complete working snippet including the Highlightjs CDN link already included in the HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

DESCRIPTION: Within the .numbers CSS class, I've adjusted the spacing between numbers using line-height: 1.3 and their size with font-size: 16px. My goal is to maintain this consistent spacing and size. Although I attempted modifying some paddings and margins, they interfered with the mouse pointer behavior. I aim to achieve a layout similar to the following:

https://i.sstatic.net/z1EuV.png

How can I align the rows accurately with the numbers?

NOTE: Pay attention to the disruption in the mouse pointer movement over the rows. The alignment issue may be resolved, but incorrect positioning of the mouse pointer could occur between two rows.

If providing assistance, kindly utilize my specific code instead of offering alternative examples, as my implementation is somewhat unique. Thank you in advance.

​

...

javascripthtmlcssnode.jssyntax-highlighting

Answer №1

In reviewing your approach, I have identified several areas that could be corrected or improved upon. Here are some of the key points to consider:

  • Modification: Due to potential issues with contenteditable when inserting custom user-markup using keyboard commands or copied/pasted content with styling preservation, a textarea approach is suggested instead to avoid complications.
  • Adjust the scrollbars for the elements containing numbers and highlights
  • Set appropriate height: max-content for the numbers wrapper and highlights wrapper
  • Avoid simply splitting by \n newline as it may cause text wrapping on browser resize. Instead, calculate the number of lines based on scrollHeight and line height
  • Ensure consistency in line heights, sizes, and font families between line numbers and code editor sections
  • Optimize JS code reuse by converting updateLineNumbers() into a function that accepts multiple elements as optional arguments
  • Implement a more efficient Tab key handler function tabToSpaces to insert 4 spaces rather than using substring manipulation

For further details, refer to:

Here's a streamlined suggestion (excluding irrelevant HTML/CSS and commented-out JS sections):

[...]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve data from the previous webpage and navigate it to the appropriate page using HTML?

I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format: posts.html output Displayed below is my posts.ht ...

javascripthtmlcssjsonquery-string

What is the best way to extract multiple children from a shared tag using BeautifulSoup?

My current project involves using BeautifulSoup to scrape thesaurus.com for quick access to synonyms of specific words. However, I've run into an issue where the synonyms are listed with different ids and classes for each word. My workaround is to tar ...

pythonhtmlweb-scrapingbeautifulsoup

Maximizing Redux DevTools integration with Redux Toolkit and Next.js for TypeScript projects

The initial state is visible in the DevTools, but any actions taken after the code has rendered do not show up. In pages/_app.tsx, I have implemented the following: import getStore from '../store/store' export default function MyApp({ Component ...

javascriptreact-reduxnext.jsredux-toolkit

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

phphtmlcss

Setting up Node.js and Npm behind a corporate network's web proxy may seem tricky, but with

Is there a way to set up node.js and npm to operate through a web proxy? I attempted the solutions provided below, but unfortunately, none of them were successful for me. npm config set proxy http://proxy.company.com:8080 and npm config set proxy http: ...

node.jsproxynpm

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Despite my efforts, I'm currently unable to retrieve the data attribute from an option using React as it keeps returning null. <select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}> <opti ...

javascripthtmlreactjsecmascript-6

Setting value in Angular's ng-repeat directive

Utilizing ng-repeat, I am creating a table with radio buttons. The main goal is to assign each radio button a value based on the position of the object in the original array (before any sorting takes place). However, using $index assigns the position in ...

javascriptangularjs

Troubleshooting Bootstrap 4 problem with varying sizes of div content

I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next: <div class="card-body " > <div c ...

htmlcssbootstrap-4

What are the available methods for incorporating node.js dependencies into a Python package?

At the moment, I am working with a few Python packages that are not yet published and are used locally. For development purposes, I install these packages on Linux using a Bash script into an activated virtual environment. Here's how I do it: cd /roo ...

javascriptpythonnode.jsnpmpython-packaging

Tips for accessing the HTML code of a TextBox in JavaScript while utilizing HTMLEditorExtender

Currently, I am utilizing the HTMLEditorExtender ajax tool on my website. The data is being saved in HTML format into the database and then retrieved within my project without any issues. However, there is a setback that I have encountered... When attemp ...

javascriptjqueryhtmlasp.netasp.net-ajax

What is the process for uploading an image file to a different server using Express JS?

I attempted to upload an image to another server (13003) using the file/toOther API, but the console output only displayed the following: ------file upload ------- undefined Upon further investigation by checking the console.log(req), I noticed the follow ...

node.jsexpress

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

javascripthtmlcssangulartypescript

Using Node.js to invoke an identifier loop

Having some trouble with this loop. Should I include variable c in the loop as well? Let me provide some context: there is a table and child(i) changes for every row. The SelectorT receives a sentence structured like this: Now\nIs\n09:00\n4 ...

javascriptnode.js

The class reference within the Redis event handler function is getting lost

Within my NODEJS application, I have set up subscriptions to different Redis events. My objective is to direct all events to my router, where the logic for routing requests based on the nature of each event is implemented. In the redis.js file, you can obs ...

node.jsredisnode-redis

Guide on how to refresh the 'id' after a set period using Ajax technology

I am having an issue with reloading/refreshing a specific table in order to fetch updated database information. The problem is that when I try to refresh only the table, the entire page reloads instead. However, I have managed to identify the 'id&apos ...

javascriptphpjqueryajax

What is the best way to establish a connection between sqlite and node.js?

Looking to integrate sqlite with node.js for utilizing it as the database in my project. Achieving data storage in sqlite through node.js is the goal. ...

node.jssqlite

The challenge of stacking elements using Div and a Jquery slider

I am facing an issue with the z-index on my website. The photo slider I implemented at the top seems to be causing the drop-down menu for administration to be hidden behind it. I have attempted to adjust the z-index of different divs, but so far, my chan ...

jqueryhtmlcssslider

Place items at the lower part of the container rather than the top

My <ul> has a fixed height and I want the <li> elements inside it to stack at the bottom instead of the top. I attempted using vertical-align: bottom on the <ul>, but that didn't have any effect. The <li> content may overflow ...

htmlcssflexbox

What is the method for squaring the sides of the top border?

Can the top border be squared (straightened) as shown in the image below? https://i.sstatic.net/7GKhj.png .nav.nav-tabs.custom-nav-tabs .nav-link { border-radius: 0px; } .nav.nav-tabs.custom-nav-tabs .nav-link.active { border-top: 2px solid gr ...

csstwitter-bootstrapbootstrap-4

Tips for manipulating 2 arrays where the value in one array is reliant on the value in another array

Currently, I have two arrays - arrayGuest and arrayRent. They both contain objects with a common field, GuestID. My goal is to create a list that combines fields from both arrays when their guestIDs match. The structure of the objects is as follows: class ...

javascriptarraystypescript