Discrepancy in Syntax Highlighting in HAML Code

Hopefully this is an easy fix, as I am struggling with highlighting some HAML code using the prism library.

%pre
  %code.language-haml
    &#37;header.post-header
    &#37;h1= data.title
    &#37;time{ datetime: data.date }= pretty_date(data.date)

However, it's not displaying correctly and ending up like this

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

How can I make it look like this instead?

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

This issue is really frustrating, because if I don't escape it properly, the content will be invisible.

html css haml syntax-highlighting

Answer №1

In the end, I managed to solve it by utilizing the   HTML escape code for spaces and then arranging them in alignment.

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

Divs expanding below content in IE on a particular server

Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem. To provide some context, the d ...

javascript jquery asp.net css html

Tips for modifying the color of selected text

Is there a way to change the color of the dropdown text? Currently, it is set to red but initially appears as black. When clicked on, it changes to red. How can I make it so that the color is initially displayed as red? <select> <option style ...

Ways to ensure that the ul navigation bar spans the entire bottom of the page evenly (without resorting to using table

This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it. My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the en ...

html css centering

The mdSidenav service encounters difficulties locating a component within an Angular component

Trying to understand why an Angular .component(), which contains a <md-sidenav> directive, cannot be located from the component's controller. Angular throws the error message: No instance found for handle menu The complete component code is ...

javascript angularjs html angularjs-1.5

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

I am in need of a Centered Logo using Bootstrap fixed top navigation. The goal is to have the brand centered within the navigation. Check out my Sample Fiddle .LandPageNavLinks { list-style-type:none; margin:0; padding:0; } .LandPageNavLin ...

html css twitter-bootstrap

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascript android css scroll

Dividing the screen into multiple sections to display cards

I have a question about integrating product cards into a split screen layout. Despite my efforts, the cards are stacking on top of each other instead of appearing side-by-side. Does anyone have a solution or suggestion? Below is the code I have been work ...

css bootstrap-4 grid

Displaying a list within a circle that elegantly animates, and then, after two full rotations, magically morphs

Can icons be displayed in a circle and after 1,2 rotations, revert back to the list view? https://i.sstatic.net/p4Jxm.png If so, when it forms after 1,2 rotation, it should resemble a line. https://i.sstatic.net/uJW24.png In summary, looking for a CSS3 ...

jquery html css animation

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascript html json angular typescript

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascript html css console round-slider

The style from 'http://localhost:2000/cssFile/style.css' was rejected because its MIME type was 'text/html'

Currently, I am attempting to include my style.css file in the home.ejs file being rendered by express.js. However, I keep encountering the following error: Refused to apply style from 'http://localhost:2000/cssFile/style.css' because its MIME t ...

javascript html node.js express ejs

Warning: The DataTables alert has been triggered for table ID DimStatus. It is indicating that an unknown parameter, 'Code', has been requested for row 0 and column 0 during the initialization

https://i.stack.imgur.com/yEpSp.pngI am encountering an error while attempting to display my data in a datatable. The structure of my table is as follows: [Table("DimStatus", Schema = "dmg")] public class PolicyState { [Key] ...

javascript html asp.net-mvc api datatables

Tips on eliminating the gap between two flex items while adjusting their size

Can anyone assist me with my code? Here is the current version: https://i.stack.imgur.com/00RGC.png I want it to resemble this: https://i.stack.imgur.com/JSclD.png You can find all my attempted media queries in the CSS comments at the end. Please let m ...

What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view. ul.dropdown-menu li { background-color: transparent !important; } <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu" class="menu"> ...

html css wordpress

Trouble with FilterBy Feature in Bootstrap-Table

I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...

javascript jquery html twitter-bootstrap bootstrap-table

Handsontable: A guide on adding up row values

I have a dynamic number of columns fetched from the database, making it impossible to predict in advance. However, the number of rows remains constant. Here is an illustration: var data = [ ['', 'Tesla', 'Nissan', & ...

javascript jquery html handsontable

Shift a Div to the left prior to stretching it out

I am trying to achieve a smooth leftward movement and expansion animation for a div. Currently, I am experimenting with class switching on click events to transition between the desired states. However, I am facing difficulty in making the element first mo ...

javascript jquery html css

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

python html beautifulsoup

The inefficacy of the JQUERY validation plugin, AJAX, and PHP integration

After diving into learning AJAX for submitting forms, I've encountered a roadblock. The data I submit doesn't seem to reach the PHP file as expected, and I can't figure out why it's failing. Here's my HTML: <div class="col-md- ...

php jquery html ajax

Assistance requested for integrating Remy Sharp's JQuery Marquee Plugin

I'm currently working on a project to display the latest tweets for a specific hashtag. I came across this example at http://exscale.se/__files/uploads/scrolling-twitter-feed.htm which shows tweets from user timelines rather than using the search api ...

jquery html json twitter

CSSer Q&A