Skip to content

Instantly share code, notes, and snippets.

@royashbrook
Last active December 14, 2021 21:11
Show Gist options
  • Save royashbrook/64a1333684c40b4d885fb6d353913266 to your computer and use it in GitHub Desktop.
Save royashbrook/64a1333684c40b4d885fb6d353913266 to your computer and use it in GitHub Desktop.
// go to devicon.dev and copy/paste this into the browser console or run as a snippet
// note: there are a handful which do not have the name in the standard format so they'll
// need to be manually corrected. this is just meant to make it a little easier.
//selector we'll apply the event to and get icon names from
var sel = "body > div.container > div > ul > li > span > i[class*='devicon']"
// for cleanup so can tweak and just rerun all of this
try {Array.from(document.querySelectorAll(sel)).forEach(x=>x.removeEventListener('click', handleClick)) }catch{}
try {document.querySelector('#mydiv').remove() }catch{}
//div to hold the textarea with the markdown, tweak to taste.
var elem = document.createElement('div');
elem.style.cssText = 'color:black;position:fixed;height:500px;width:500px;top:1rem;left:1rem;z-index:100;border-radius: 25px;background: #BE6098;padding: 20px;';
elem.id = 'mydiv'
document.querySelector('body > div.container > header').prepend(elem);
//querySelector('body > div.container > header').appendChild(elem);
//little title
var p = document.createElement('p');
p.style.cssText = 'font-size:1.5rem;top:1rem;text-align:center;width:100%;color: whitesmoke';
p.innerHTML = 'Click the icons on the right.<br />Markdown will appear in textarea below.'
elem.appendChild(p);
//textarea to hold markdown
var t = document.createElement('textarea');
t.style.cssText = 'resize: none;white-space:nowrap;overflow:scroll;margin-top:1rem;width:100%;height:70%';
elem.appendChild(t);
//array to hold our current selections
var arr = [];
//bind array data to markdown output in textarea
var bindTextArea = () => {
t.value = ''
arr.forEach(x=>{
iconname = x.split('-')[1]
t.value +=`[<img height="50px" alt="${iconname}" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${iconname}/${iconname}-original.svg" />]()\n`
})
}
//handler for the icons we may click on
var handleClick = function() {
let val=this.classList[1];
let idx = arr.indexOf(val)
idx >= 0
? arr.splice(idx, 1)
: arr.push(val);
bindTextArea()
}
//select the elements and bind the handler
var icons = document.querySelectorAll(sel)
Array.from(icons).forEach(x=>x.addEventListener('click', handleClick))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment