Incorporate github-markdown-css into your current blog design for a stylish touch

I am looking to implement markdown support in my blog, which is based on a CSS theme with numerous predefined styles for basic elements like p and h. I came across the project github-markdown-css, which seemed promising. However, after adding these styles to my blog and applying the markdown-body class to the article's div, the content did not display as expected due to conflicting styles from the blog theme.

To incorporate the markdown styles, I included the following:

link(rel='stylesheet', href='/css/styles.css')
link(rel='stylesheet', href='/css/github-markdown.css')

Despite placing github-markdown.css below styles.css, the theme's styles still took precedence. Is there a way to override the theme's styles specifically for articles that have the markdown-body class?

Answer №1

After much searching, I found a perfect fix in the form of the :not pseudo-class. In my blog, only articles had a markdown body, enclosed within an .article-entry class. By simply updating this to

.article-entry:not(.markdown-body)
, I made minimal changes to the CSS and achieved a sleek solution.

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

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

Using Angular Material to create tabs and grid lists (md-tabs and md-grid-list

I'm having trouble getting the md-grid-list to appear inside an md-tab. I copied the md-grid-list code from here and placed it under a series of dynamically generated tabs. However, the grid list doesn't seem to be displaying on any of the tabs ...

Color of the background in an Ionic tab

https://i.sstatic.net/lyhMu.jpg Hello, I am currently working on developing a mobile app using Ionic. I have utilized the Ionic tabs template, but I am facing an issue with the tab's background color remaining white at the bottom of the screen. Altho ...

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

Unable to locate external CSS files in Firefox using the absolute file path

On my website, I have included the following line in the <head> section: <link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" /> Upon viewing the page in Firefox 11.0, it appears that the main.css file is not ...

Trouble with jQuery on click function, no actions triggered

I am having trouble with this jQuery function that is supposed to post the value of a variable to a PHP page and display it in the correct status class. I have included the necessary jQuery file, but for some reason, nothing is happening. Any assistance w ...

A tag that does not adhere to the background color's rgba opacity restrictions

Can you believe what's happening to me? Check out this code snippet. I'm trying to apply an rgba color to my a tag, but it's acting like an rgb color instead of the intended rgba. The text background is solid, but the rest of the background ...

What distinctions exist between setting width: auto; and width: fit-content;?

As far as my understanding goes, when you apply width: fit-content; to an element, it signifies that the element's width will expand to utilize all available space, but will not shrink below the min-content size within the element. However, does the d ...

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

Responsive height using Material Design Lite

I have a website using MDL, with a prominent header centered on the page. To enhance visibility, I added a background box behind the text. To view the CodePen example, click here. The challenge is to ensure that when the window is resized, such as on a m ...

Modify the standard width setting in my css file

I'm looking to adjust my default width in the CSS file so I can incorporate an HTML5 animation on my website. Here's what I've placed on the site: <div id="nakuru_hype_container" style="margin:auto;position:relative;width:100%;height:33 ...

Tips for eliminating additional white space within a bootstrap row

I'm having trouble removing the extra space on my website while using Bootstrap 5. I've tried various Bootstrap classes like pr-0, mr-0, p-auto, m-auto but none of them seem to work. I also attempted using CSS margin-right: 0; but that didn' ...

Designing GWT FlexTable using pure CSS styling

Is there a way to style a GWT FlexTable using CSS alone? The API doesn't provide information on available CSS classes. Are there no predefined classes and do I need to define them myself? I am particularly interested in styling the "th" element. ...

Responsive Bootstrap dropdown menu adjusts its size when clicked

I'm currently in the process of creating a basic navbar that includes a drop-down menu on the far right side, as depicted here: https://i.sstatic.net/hs9us.png The issue I'm facing is that when I click on the dropdown, the navbar automatically ...

The dominance of the !important CSS property and inline styles getting overridden

While using Bulma to design a website, I encountered an unusual issue with the Tabs component within a Hero component. The Tabs element comes with a default margin-bottom of 1.5rem, which does not align with my desired aesthetics. Despite trying differen ...

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...