Skip to content

Instantly share code, notes, and snippets.

@ollytheninja
Forked from lukereative/Antimony.css
Last active April 30, 2024 17:30
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save ollytheninja/8498790 to your computer and use it in GitHub Desktop.
Save ollytheninja/8498790 to your computer and use it in GitHub Desktop.
Markdown css Just add <link href="style.css" rel="stylesheet"></link> to the start of your markdown document.
* { margin: 0; padding: 0; }
abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp { hyphens: none; }
html {
padding: 2em;
font: normal 18px/1.25 Source Sans Pro, sans-serif;
color: #000;
hyphens: auto;
word-wrap: break-word;
background: #fff;
}
body > :first-child {
margin-top: 0;
}
/* @group Headings */
h1,h2,h3,h4,h5,h6 {
line-height: 1;
margin: 0;
margin-top: 1.5rem;
text-rendering: optimizeLegibility;
}
h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
h2 em, h3 em{
color:grey;
}
/* @end */
small {
font-size: 65%;
}
p {
margin-top: .75rem;
}
hr {
margin: .75rem 0;
opacity: .5;
}
ol,ul {
margin-top: .75rem;
}
ol ul, ol ol, ul ul, ul ol {
margin-left: 2rem;
margin-bottom: .75rem;
}
li {
margin: .5em 0;
}
abbr {
font-variant: small-caps;
font-weight: 600;
text-transform: lowercase;
color: #808080;
}
abbr[title]:hover {
cursor: help;
}
/* @group Block Quotes */
blockquote {
border-left: 5px solid #333;
padding-left: .75em;
margin-left: calc(-.75em - 5px);
font-style: italic;
}
blockquote + figcaption {
display: block;
margin-top: -1.5rem;
margin-bottom: 1.5rem;
font-size: 75%;
text-align: right;
}
blockquote + figcaption:before {
content: "— ";
opacity: .05;
}
/* @end */
/* @group Pre-formatted and Code */
pre {
overflow: auto;
margin: .75rem 0;
padding: .5rem;
font-size: .875em;
white-space: pre;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
}
code {
padding: 0 .25em;
white-space: pre;
font-family: Source Code Pro, monospace;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
}
pre code {
padding: 0;
word-wrap: normal;
white-space: pre-wrap;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
/* @end */
/* @group Tables */
table {
margin: .75rem 0;
padding: 0;
border-collapse: collapse;
}
table tr {
margin: 0;
padding: 0;
border-top: 1px solid #ccc;
background-color: #fff;
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
table tr th {
margin: 0;
padding: .35em .75em;
font-weight: bold;
text-align: left;
border: 1px solid #ccc;
}
table tr td {
margin: 0;
padding: .35em .75em;
text-align: left;
border: 1px solid #ccc;
}
table tr th :first-child, table tr td :first-child { margin-top: 0; }
table tr th :last-child, table tr td :last-child { margin-bottom: 0; }
/* @end */
@codewizard13
Copy link

codewizard13 commented Aug 15, 2022

Nice stylesheet! I found your post here while searching for "import stylesheet in markdown file". Adding the <link> tag to the head of my markdown document as you prescribed,

<link href="style.css" rel="stylesheet"></link>

did not work, unfortunately. I had high hopes that this was the solution. But, the only thing that worked was adding the styles within paired <style> tags.

My Setup:

  • IDE: VS Code
  • Extension: Auto-Open Markdown Preview

UPDATE: (08/15/22)

Well, I take that back ... it DOES work! Apparently there is a lag issue between the preview updating from the external stylesheet. But, after troubleshooting a bit more I found that running CTRL + SHIFT + P and then Developer: Reload Window while having the markdown document focused does the trick. So a reload is required with the Auto-Open Markdown Preview plugin to make external styles take effect within markdown files, it seems.

Hopefully this info will help somebody else!

@ollytheninja
Copy link
Author

Glad it helped someone 8 years later! Completely forgot this was here!

@fsegu
Copy link

fsegu commented Nov 4, 2022

It was really helpful, it works. Thanks

@radhikapc
Copy link

Where do you insert the tag if you are using hugo. My markdown starts with the metadata.

linkTitle: "Configuration Library"
title: "Configuration Library"
weight: "1"
aliases:
  - /en/configuration-library.html

@ollytheninja
Copy link
Author

@radhikapc I'd suggest searching online, this tutorial might help
https://hugo-mini-course.netlify.app/sections/styling/custom/

@ivankharak
Copy link

But it doesn't render in github profile.
Please help me~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment