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

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

I am attempting to integrate d3-graphviz following the guidance provided here within an angular template, like in this example. The tutorial on the d3-graphviz website advises me to include the following code in the index.html file: <!DOCTYPE html> & ...

javascripthtmlangulard3.jsgraphviz

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas

Modifying the value property of the parent element

Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...

javascriptjqueryhtml

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

javascripthtmlangulartypescriptionic-framework

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

I have read numerous questions on this topic and have compiled the code I currently have from various responses. Unfortunately, despite my efforts, I am unable to make it work and I cannot identify the reason behind this issue. Below is the HTML form str ...

javascriptphpjqueryhtmlajax

Verify that all images retrieved through AJAX have finished loading before proceeding

Is there a way to ensure all images in the HTML loaded via AJAX are fully loaded before performing an action like displaying them? I've experimented with various methods, including using the 'imagesloaded' plugin. var page = 'P40&apos ...

jqueryhtmlajaximagesloaded

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

javascriptjqueryhtmlcssless

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

Search field in DataTables appears to be misaligned

I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...

javascriptjqueryhtmlcssdatatables

Tips for invoking a function using ng-model together with the ng-model value

Within a div element, I have a text field where I am using ng-model to capture the value. I need to trigger a function for validation when a date is entered in the text field. How can I achieve this while still utilizing ng-model? Any suggestions on how to ...

javascripthtmlangularjsmeteorangularjs-ng-model

`how to insert finished HTML & CSS header into WordPress PHP documents`

After dedicating countless hours to studying, I still can't figure out how Wordpress will locate and utilize my alternate header. The code snippet below served as a helpful starting point: <!--?php /* */ if(is_page(23)) { get_header('about&a ...

phphtmlcsswordpress

Looking for an API to retrieve random quotes and images from a website?

Greetings, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS along with the basics of JS. Level of Expertise: Beginner During my exploration, I stumbled upon this intriguing website - . It stands out a ...

javascripthtmlcssreactjsapi

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

JavaScript document string separation

Hi there, I'm a newbie here and could really use some assistance. I am struggling with creating a function and would appreciate any ideas... To give you an idea of what I need help with, I have a String and I want to check if it contains a specific w ...

javascripthtmlstring

Ways to distinguish between two div elements that have scroll bars and those that do not

I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...

javascriptjqueryhtmlcss

Tips for accessing the @keyframes selector and extracting the value from it

In my CSS code, I have a shape element with an animation that spins infinitely for 50 seconds. #shape { -webkit-animation: spin 50s infinite linear; } @-webkit-keyframes spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(-360deg ...

javascriptjquerycss

Reveal/Conceal footer upon vertical scrolling

I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...

javascriptjqueryhtmlcss

I Tried Adding Up All the Numbers, but It Doesn't Seem to Work for Every Dynamic Total Field

In my project, I am utilizing Laravel 5.7 and VueJs 2.5.*. The issue I am facing is that when I input values, the Total field calculates correctly. However, when I dynamically add rows for items, the calculation only works for the first row and not for the ...

javascripthtmllaravelvue.jslaravel-5.7

Why are my Chrome Div regions failing to expand to their full width?

I have been searching but couldn't find an answer to my issue, so I apologize if this question has been asked before. I am working on a simple site layout and noticed that two of the div regions do not expand fully in Chrome, however, they do in Firef ...

htmlcss