How can you emphasize text in a code block with a background color?

In my quest for customization, I aim to achieve a specific display format:

My desire is to highlight a segment of code within a code block that already has syntax highlighting. This task pertains to a markdown file residing on Github and being served via Github Pages (using kramdown markdown, html, css).

I understand that syntax highlighting can be implemented inside a code block like so:

java
int foo (void) {
    int i;
}

Additionally, I am aware that individual text in a code block can be highlighted by employing the following technique:

<pre><code>int foo (void) {
    <span style="background-color:yellow">int i;</span>
}
</code></pre>

However, the challenge lies in merging these two elements seamlessly. How can this be accomplished effectively?

Answer №1

If you want to add some color to your code, consider using Google's code-prettify tool. This will automatically apply colors to all code snippets marked with the class prettyprint. To further customize the appearance, you can utilize a <span> element to adjust the background color.

pre {
  background-color: #eee;
  border-radius: 5px;
}
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <pre>
    <code class="prettyprint">
 int foo (void) {
   <span style="background-color:yellow">int i;</span>
 }
 // Yay code and it has colors
    </code>
  </pre>

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

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

The action does not execute when the form is submitted

I’m currently working on a simple registration form, but I’ve encountered an issue with my code. Despite troubleshooting, I can’t seem to identify any errors in my code. Upon submission of the form, the page fails to redirect to register.php. Below ...

A guide to revealing the value of a button or anchor tag using AngularJS

I'm working on a way to show a button or anchor tag value depending on the true or false value returned by my angular variable. Here's a snippet of my code: <a href="#" id="verify">{{userInformation.value}}</a> The userInformation.v ...

How can I locate the ID of the HTML input element with jQuery?

I am trying to create a page with a button that looks like this: <input type="button" id="btnAddBusinessUnit" value="Add Business Unit" class="clsAddBusinessUnit" alt="testBtn" /> When the button is clicked, I want to display the id 'btnAddBus ...

Optimizing Divs for Maximum Layout Efficiency

My current issue involves a series of divs that contain varying amounts of content. These divs are floated left and I am striving to align them seamlessly without any vertical space between them (except for the 10px margin that I have included). You can v ...

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

Remove an uploaded image utilizing an ajax uploader

I successfully implemented an AJAX loader for file uploads to the server. Everything is working well, but now I want to add a delete option for each image so that users can remove images before saving. The current layout of my images is as follows: To upl ...

Using an image as the background for a three.js scene may cause it to appear distorted

I am struggling with setting an image as a background for my scene without it becoming blurry. I have attempted to use the following code: textureLoader.load("images/background/space.png", function(t) { scene.background = t; }); The problem arises when ...

Currently studying PHP. The classic "Hello world" message is not appearing when using EasyPHP and coding in Notepad++

<html> <!--HTML--> <head><title>a simple test</title></head> <body>a basic test</body> <p>javascript</p> <!--javascript--> <p><script> document.write("hello universe") </sc ...

Tips for utilizing the Ace editor validator without the need to create a new Ace editor instance

In my React application, I utilize react-ace to build a CSS text editor. The implementation looks something like this... import Ace from 'react-ace' ... <Ace mode="css" value={value} onChange={onValueChange} onValidate ...

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

Issue with HTML5 video not displaying poster image after using .load() method

I am facing an issue with my video implementation where the poster image is not returning after exiting full screen mode. I have a video with overlay content that requests full screen when the user clicks a custom play button. When the user exits full scre ...

What is the best way to enlarge the text in an image input field?

One of the input fields I'm working with looks like this: <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/> I am trying to figure out how to enlarge the text Submit on that field using CSS. Any suggestio ...

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

I am looking to display a large amount of data using the Accordion component from material-ui nested inside a Box element. However, I am unsure how to customize the default styles in order to set a specific maxHeight. Is there a way for me to take control ...

How can you position inline-block elements within a flex container?

I have a main div set up as a flex box. Inside this main div, there will be three elements positioned as inline-block: two advertisements on the left and right sides, with the content in between. My goal is to have the advertisements aligned to the left an ...

PHP tag iteration for unordered list segmentation

My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...

Utilizing flexbox to create spacing between elements and ensuring there are no margins on the parent

Discover a Codesandbox demo at: https://codesandbox.io/embed/silly-firefly-87cov A unique challenge awaits with this project - elements within the parent container are positioned dynamically using flexbox. But how can we apply margins selectively only bet ...

What is the best way to add two hyperlinks within a single tab of a Bootstrap navigation menu?

I attempted to place two links in one tab, but I was unsuccessful. Here is my navbar code: <!DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scal ...

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

I'm trying to figure out how to filter an ng-repeat function based on the first letter of each option. For example, I want to filter a set of array or string so that only options starting with "A" or "B" are displayed. Can anyone help me with this? H ...

The dropdown menu is extending beyond the edge of the screen

I'm having trouble with my navbar dropdown menu extending off the page to the right. Take a look at the code below: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...