A guide on customizing syntax highlighting themes and language settings in reveal.js

Is there a way to customize syntax highlighting for a presentation in reveal.js without using the default zenburn theme? I specifically want to highlight code written in R. I tried creating custom CSS for R using highlight.js, but ran into an issue where highlight.js uses 'hljs' to denote code in HTML while reveal.js uses 'pre code.' For instance, the highlight.js CSS is structured like this:

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fdf6e3;
  color: #657b83;
  -webkit-text-size-adjust: none;
}

On the other hand, the reveal.js highlighting CSS looks like this:

pre code {
  display: block; 
  padding: 0.5em;
  background: #3F3F3F;
  color: #DCDCDC;
}

Are there alternate themes available for syntax highlighting in reveal.js, or is it necessary to manually change all the selectors?

Answer №1

If you find yourself using an outdated version of reveal.js, it may be affected by a known issue documented on GitHub.

In the event that you are unable to update to a newer version, consider replacing the minified version of highlight in plugin/highlight/highlight.js with the most recent stable release.

For all other scenarios, simply include the desired highlight CSS file (such as idea.css) in the lib/css directory and substitute the zenburn.css link in index.html with your chosen file (e.g.

<link rel="stylesheet" href="lib/css/idea.css">
)

Note that styles applied to .reveal pre code in reveal's theme CSS could potentially clash with certain highlight styles, making them difficult to read or causing them to appear unattractive unless further adjustments are made.

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

How is the Menu being populated?

I've been tasked with updating a website that was originally created by someone else. I am currently having trouble locating where I can make changes to the menu. The website in question is located at . The navigation.php file below is responsible for ...

What is the process for placing the back button on the left side in Ionic?

I am working on a project with Ionic framework and I need to align the back button to the left in the header. Here is the code snippet: <ion-header-bar class="bar-positive" align-title="left" > <h1 class="title" style="text-align: center">More ...

Attempting to implement an offset with JavaScript in conjunction with a stationary header bar

I was attempting to calculate the dimensions of a static header identified as "headbar" in order to create an offset for the main page. The JavaScript code appears to be functioning properly based on the console.log output. However, the CSS is not updating ...

What can be done to prevent buttons from piling up?

In the initial stages of my code, I am focusing on establishing the positioning for various elements. Although I have managed to structure most of it, the final two sections are still pending and I have encountered a problem. Utilizing bootstrap has ensur ...

Influencing various classes when :active is triggered

I encountered a challenge while working on an HTML project. I included a checkbox that should highlight all text input fields when checked. However, I'm facing an issue where some of the input fields within tables are not being affected by my code. An ...

Issue with Bootstrap 2-column layout not functioning properly on mobile devices

I have been working on Bootstrap and I am facing an issue with the positioning of two badges. Currently, one badge appears on the right side and the other on the left side. Although I tried adjusting the left property, it causes overlapping when the size ...

Adjust the transparency of a radio button when it is selected

Looking at my HTML, I have the following structure: <label class="fakeRadio active"> <input type="radio"> </label> This is the CSS style I am using: .fakeRadio input[type=radio]:checked + .fakeRadio.active { opacity:0.5; } I&a ...

Align child elements in the middle horizontally within a col-lg-4 class using Bootstrap

I am currently working with Bootstrap 4.3.1 and utilizing flex for my page layout. <div class='row d-flex align-items-center'> <div class='col-lg-12'> <div class="form-group row"> ...

Customize your Bootstrap 4 card: change the header content, keep the body fixed

My current project involves the use of a bootstrap 4 card element: <div class="card" style="height:"500px;width:100px"> <div class="card-body"> <div class="top-portion"> This section can b ...

Designing borders for tables

My current table styling approach is as follows: #content table { width: 100%; margin-top: 1em; border-collapse: collapse; border: 1px solid #222; } #content table td { border: 1px solid #888; padding: .3em; } I aim to create tab ...

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

Styling the center menu

Is there a way to horizontally center this top menu using CSS? https://i.sstatic.net/9yvJf.png This is the HTML structure I am working with: <div class="wrapper_menu_hoz"> <div class="container_24 "> <div class="gr ...

Incorporate anchor or data-filter into the URL for better functionality

Is there a way to set up a button in a menu that sorts items listed below it? For example, let's say the button is labeled "news". Using the data-filter attribute or another method of identification, can I navigate to a specific page with this button ...

An HTML table with a horizontal scroll that automatically follows the headings and a vertical scroll, but facing an issue with text

Apologies if you have seen some of my previous posts today. I created a piece of HTML that was necessary for what I wanted to achieve. I needed a horizontal scroll that would keep the thead aligned with tbody as you scrolled through the content. I also r ...

What is the best way to center the text in the middle of a flex container?

I am struggling with the alignment of elements in my code. Here is what I currently have: HTML: </div class="container"> <footer>Maximilian Crosby ©</footer> </div> <div class="bot-bar" > <a href="./contact-u ...

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

Tips for lining up items in a row

I am struggling to align these boxes next to each other instead of on top of each other. It seems like it should be an easy task, but I just can't seem to make it work. Check out my code here for reference. <body> <div class="horAlign"&g ...

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property. <input type="text" Class="ChangeColor" /> <input type="text" Class="ChangeColor" /> <input type=& ...

From jQuery integration to Wordpress - Frustrating uncaught errors are making me lose

I recently completed a small application on Codepen and decided to transfer it to my Wordpress website. After updating the necessary elements, such as replacing $ with jQuery and adjusting the JSON file location, I encountered some issues in the console. ...