Last active
May 26, 2022 06:45
-
-
Save o-az/eb41ae192797f424f8053ffad98cc10b to your computer and use it in GitHub Desktop.
Dynamically add <link /> tag to your HTML page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type NewLinkTagStatus = 'ALREADY_EXISTS' | 'CREATED' | 'ERROR' | |
type NewLinkTagArgs = Pick<HTMLLinkElement, 'href' | 'rel' | 'type'> & Partial<HTMLLinkElement> | |
export function newLinkTag(attributes: NewLinkTagArgs): NewLinkTagStatus { | |
// these two attributes are required | |
const { href, rel } = attributes | |
if (!href || !rel) { | |
console.error('newLinkTag: href and rel are required attributes') | |
return 'ERROR' | |
} | |
// check if tag already exists | |
const tagExists = document.querySelector(`link[href="${href}"]`) as HTMLLinkElement | null | |
if (tagExists) return 'ALREADY_EXISTS' | |
// remove props/attributes that are null/undefined | |
const validAttributes = JSON.parse(JSON.stringify(attributes)) | |
// create new <link /> element and add attributes | |
let newElement = document.createElement('link') | |
newElement = Object.assign(newElement, validAttributes) | |
/** | |
* Next 5 lines are optional. | |
* For organizational purposes, I like having a <meta name="EXTERNAL_CSS" /> tag in | |
* my head that I can add my external CSS under to keep things organized. | |
*/ | |
let insertLocation = document.querySelector('meta[name="EXTERNAL_CSS"]') as HTMLMetaElement | null | |
if (!insertLocation) { | |
insertLocation = document.createElement('meta') as HTMLMetaElement | |
Object.assign(insertLocation, { name: 'EXTERNAL_CSS' }) | |
} | |
// insert new <link /> element after <meta name="EXTERNAL_CSS" /> | |
insertLocation.insertAdjacentElement('afterend', newElement) | |
return 'CREATED' | |
} | |
// Usage | |
const linkTag = newLinkTag({ | |
rel: 'stylesheet', | |
// this is the stylesheet.css below | |
href: 'https://gist.githubusercontent.com/o-az/eb41ae192797f424f8053ffad98cc10b/raw/306a5b678779e79b842b09e54f166a7e349bb9a6/stylesheet.css', | |
type: 'text/css', | |
title: 'prism-synthwave84', | |
}) | |
console.log(`prism-synthwave84 link tag: ${linkTag}`) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code | |
* Demo: https://marc.dev/demo/prism-synthwave84 | |
* | |
* Ported for PrismJS by Marc Backes [@themarcba] | |
*/ | |
code[class*="language-"], | |
pre[class*="language-"] { | |
color: #f92aad; | |
text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; | |
background: none; | |
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; | |
font-size: 1em; | |
text-align: left; | |
white-space: pre; | |
word-spacing: normal; | |
word-break: normal; | |
word-wrap: normal; | |
line-height: 1.5; | |
-moz-tab-size: 4; | |
-o-tab-size: 4; | |
tab-size: 4; | |
-webkit-hyphens: none; | |
-moz-hyphens: none; | |
-ms-hyphens: none; | |
hyphens: none; | |
} | |
/* Code blocks */ | |
pre[class*="language-"] { | |
padding: 1em; | |
margin: .5em 0; | |
overflow: auto; | |
} | |
:not(pre) > code[class*="language-"], | |
pre[class*="language-"] { | |
background-color: transparent !important; | |
background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); | |
} | |
/* Inline code */ | |
:not(pre) > code[class*="language-"] { | |
padding: .1em; | |
border-radius: .3em; | |
white-space: normal; | |
} | |
.token.comment, | |
.token.block-comment, | |
.token.prolog, | |
.token.doctype, | |
.token.cdata { | |
color: #8e8e8e; | |
} | |
.token.punctuation { | |
color: #ccc; | |
} | |
.token.tag, | |
.token.attr-name, | |
.token.namespace, | |
.token.number, | |
.token.unit, | |
.token.hexcode, | |
.token.deleted { | |
color: #e2777a; | |
} | |
.token.property, | |
.token.selector { | |
color: #72f1b8; | |
text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475; | |
} | |
.token.function-name { | |
color: #6196cc; | |
} | |
.token.boolean, | |
.token.selector .token.id, | |
.token.function { | |
color: #fdfdfd; | |
text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975; | |
} | |
.token.class-name { | |
color: #fff5f6; | |
text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75; | |
} | |
.token.constant, | |
.token.symbol { | |
color: #f92aad; | |
text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; | |
} | |
.token.important, | |
.token.atrule, | |
.token.keyword, | |
.token.selector .token.class, | |
.token.builtin { | |
color: #f4eee4; | |
text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575; | |
} | |
.token.string, | |
.token.char, | |
.token.attr-value, | |
.token.regex, | |
.token.variable { | |
color: #f87c32; | |
} | |
.token.operator, | |
.token.entity, | |
.token.url { | |
color: #67cdcc; | |
} | |
.token.important, | |
.token.bold { | |
font-weight: bold; | |
} | |
.token.italic { | |
font-style: italic; | |
} | |
.token.entity { | |
cursor: help; | |
} | |
.token.inserted { | |
color: green; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment