When coding on Github pages, the behavior of code blocks can vary depending on whether

I am interested in obtaining the offline version, which can be seen here:

https://i.sstatic.net/NKFSQ.jpg

On the other hand, the online version has a different appearance:

https://i.sstatic.net/133gH.jpg

If you want to view the incorrect version, click on this direct link to visit the blog.

A notable issue is the dark gray box surrounding the code block that I wish to eliminate. Despite my efforts to address this in the configuration files, it remains unresolved since the offline version displays correctly. For reference, I am using jekyll 3.5.2.

To access the repository of the blog, click on this link.

cssjekyllgithub-pages

Answer №1

When you have a Gemfile that includes:

source "https://rubygems.org"
gem 'github-pages'

You should be able to replicate the behavior of Github pages.

To fix your issue, try replacing the .highlight {... rule with pre.highlight {... in the _highlights.scss file.

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

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

htmlcss

The transparency feature using rgba is not supported in the Chrome browser for Android

Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...

androidcssgoogle-chrome

Collapse the Bootstrap Menu upon selecting a Link

I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I ensure a DIV is shown on every sub-page?

Is there a way to dynamically display a <div id="chatbox"> in all subpages without needing to manually edit each one? For example, adding this code to the main index.html file and having it appear on /products/index.html. ...

htmlcssindexing

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

What are the steps to restrict the scope of a <style> declaration in HTML?

Currently, I am in the process of creating a user interface for a webmail. Whenever I receive an email, I extract its content and place it within a <div> element for display purposes. However, one challenge that I am facing is that each email contain ...

javascripthtmlcssstylesheet

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

javascriptcssxhtmltexthtml

Creating Visuals with CSS Gradients: A Tutorial on Generating Images and SVG Files

I currently have a CSS gradient applied and I am interested in creating an image or SVG file from it. However, I am unsure of how to accomplish this task. Any advice would be greatly appreciated. background: -webkit-linear-gradient(bottom, rgb(211, 208, ...

css

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

Ways to customize the selected item's color in md-select using Angular Material?

Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected: https://i.sstatic.net/FRU0r.png Comparatively, this is how it appears with the default theme applied: https:/ ...

cssangularjsmaterial-designangular-material

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

What are the steps for integrating a date and time picker bootstrap plugin?

Referencing a tutorial from http://www.w3schools.com/bootstrap/bootstrap_modal.asp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role= ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

htmlcss

Issues with locating the fonts: React-slick paired with nextjs

Incorporating react-slick into a NextJs project has been quite seamless, however, I'm encountering issues with importing the necessary fonts from the CSS files. To address this snag, I've attempted the following steps: npm install slick-carouse ...

cssreactjsfontsnext.jsreact-slick

Using JavaScript to place image data on the canvas in an overlay fashion

I recently wrote the code below to generate a rectangle on a canvas: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canv ...

javascripthtmlcsshtml5-canvas

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

cssvue.jsvuejs2vuetify.js

Having trouble making my if / else statement show the_header_image_tag on WordPress

Having some trouble getting my if / else statement to function correctly. I am using a WordPress function called '' and I want to apply different CSS styles based on whether it is used or not. My theme allows for the display of a banner, but onl ...

phpcsswordpress

Jekyll adjusting the starting line of code snippet formatting

Currently, I'm in the process of setting up code highlighting for my blog using Jekyll and Pygments. However, I'm facing an issue where the first line of every code snippet seems to be slightly offset. To create a gutter effect, I'm utilizin ...

htmlcssjekyllpygments

Conceal the slider thumb within the material-ui framework

I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here. Below is my code snippet: import * ...

javascriptcssmaterial-uislider