Creating formatted code blocks within my HTML document

I'm currently working on achieving this layout in my HTML:

https://i.stack.imgur.com/2LEQO.png

Here is the JSFiddle link: https://jsfiddle.net/cr9vkc7f/4/

I attempted to add a border to the left of my code snippet as shown below:

 border-left: 1px solid #444;

The current output looks like this, but I want to align the numbers to the left side to match my desired layout: https://i.stack.imgur.com/pvX3O.png

If anyone could assist me with this, I believe I am very close to achieving the desired result.

htmlcsstwitter-bootstrap

Answer №1

To display the empty lines, follow these steps:

    <ol class="linenums">
      <li></li>
      <li></li>
      <li></li>
      <li class=""><code><span class="tag">&lt;pre&gt;</span><span class="pln">&amp;lt;p&amp;gt;An empty block of code wrapped in pre tags.&amp;lt;/p&amp;gt;</span><span class="tag">&lt;/pre&gt;</span></code></li>
      <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">For instance, </span><span class="tag">&lt;code&gt;</span><span class="pln">&amp;lt;section&amp;gt;</span><span class="tag">&lt;/code&gt;</span><span class="pln"> should be set as an inline element.</span><span class="tag">&lt;/p&gt;</span></code></li>
      <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">To change directories, type </span><span class="tag">&lt;kbd&gt;</span><span class="pln">cd</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> followed by the directory name.</span><span class="tag">&lt;/p&gt;</span></code></li>
    </ol>

https://i.stack.imgur.com/ENb9l.png

Answer №2

Click here for the code snippet

.panel-code.pre {
  border-radius: .5em;
  border: 1px solid #ddd;

  overflow-x: scroll;
  padding: .5em .3em;
}

ol.linenums {
  border-left: 1px solid #444;
  margin: 0 0 0 3.3em;
  background-color: #333;
  /* IE indents via margin-left */
  padding: 0;
}

ol.linenums li {
  line-height: 1.5;
  padding-left: .8em;
  list-style: decimal inside;
  
  display: list-item;
}
.tag {
    
}
<div class="panel-body panel-code" ng-show="isShow" ng-click="changeValue(false)">

  <code>        <ol class="linenums">
          <li class=""><code><span class="tag">&lt;pre&gt;</span><span class="pln">&amp;lt;p&amp;gt;A block of code is wrapped in pre tags&amp;lt;/p&amp;gt;</span><span class="tag">&lt;/pre&gt;</span></code></li>
          <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">For example, </span><span class="tag">&lt;code&gt;</span><span class="pln">&amp;lt;section&amp;gt;</span><span class="tag">&lt;/code&gt;</span><span class="pln"> should be wrapped as inline.</span><span class="tag">&lt;/p&gt;</span></code></li>
          <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">To switch directories, type </span><span class="tag">&lt;kbd&gt;</span><span class="pln">cd</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> followed by the name of the directory.</span><span class="tag">&lt;/p&gt;</span></code></li>
        </ol>
      </code>

  
</div>

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

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Tips for modifying the text color of radio button choices in HTML and CSS

I have set a black background image for my HTML page. How can I change the radio button labels/texts to white, similar to the questions? This is the code snippet that shows how it currently looks on the page: View Image <hr&g ...

htmlcssformsstylingtext-styling

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

htmlcssdom

Utilizing the p tag to incorporate dynamic data in a single line

I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: However, I am facing an ...

cssangular

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

javascripthtmlmpmediaquery

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

cssmaterial-uicard

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

Obtaining specific data from the forEach iteration, post-click event with JavaScript

Trying to access the value from a Tree-structured Array of Objects stored in Local Storage, Created a function that retrieves values from local storage using forEach and displays them on the screen. Clicking on the Yes/No button triggers the same functio ...

javascripthtml

Error message: JavaScript multiline strings within backticks are currently unsupported in Internet Explorer

My HTML string, stored in a variable, is being used to populate the innerHTML. Although the first example (using backtick syntax) is simple, it does not function in Internet Explorer 11. Is there a way to make the first example work in Internet ...

javascriptjqueryhtmlinternet-explorer

Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...

htmlcsstwitter-bootstrap

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Is there a way to create menus where clicking on a holiday/seasonal category opens up all related lists automatically? For example: https://i.sstatic.net/Nctd1.png I've been searching online for submenu options but haven't found the right metho ...

javascriptjqueryhtmlcss

Bootstrap 5.3 does not allow custom background colors to take precedence

Ever since the update to Bootstrap 5.3.1, I've been facing an issue where two custom background colors are not overriding the colors set by Bootstrap, even when using !important. Strangely enough, they were working fine before the update. Here are my ...

cssbootstrap-5

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Information is cleared before it is transmitted

Let's begin with the following code: JavaScript: function keyPressed(e) // function for key press event { if (e.keyCode == 13) // 13 represents the enter key { $(this).val(""); } } $(document).ready(function () { $(' ...

phpjavascriptjqueryhtmlajax

Having difficulty targeting the span element in my CSS code

I've got an HTML document that includes multiple span elements. <span>Skip to content</span> There are several of these span elements throughout the document. I've attempted to hide them using the following CSS: span {display: non ...

csscss-selectors

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" Upon inspection, it appears that the element is visible with no distinct features. However, I have e ...

pythonhtmlseleniumselenium-webdriver

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss