Create a gist now

Instantly share code, notes, and snippets.

@kynatro /README.md
Last active Apr 13, 2017

Embed
TKTK Outstanding Copy Highlighter

TKTK

Tktk short for "To Come" in publishing is a simple placeholder highlighting library. Load this file on your latest project to highlight all the areas that still need copy, links, or final imagery. To highlight items, simply do one of the following:

Images: Either add a tktk class to the img tag or add #tktk to the image source.

Copy: Either add a tktk class to the element, or start the copy with "tktk"

For all elements that are "to come", copy will be highlighted in a nice, obvious magenta and images bordered in a 2px magenta border (using box-shadow so as not to affect layout).

Dependencies

  • ES6 compatible build system such as Browserify or WebPack with the Babel loader
/**
* Highlight outstanding images and copy
*
* Outlines images and highlights copy in magenta wherever "tktk" is found.
* Simply start outstanding copy blocks with "tktk" to highlight text. Add
* a "#tktk" to the end of image src values and un-defined href values to
* outline images and highlight links respectively.
*/
export default function() {
const css = `.tktk, a[href*="#tktk"] {
color: magenta !important;
}
img[src*="#tktk"], img[srcset*="#tktk"] {
box-shadow: 0 0 0 2px magenta;
}`
const styleTag = document.createElement('style')
styleTag.type = "text/css"
styleTag.innerHTML = css
document.querySelector('head').appendChild(styleTag)
document.querySelectorAll("p,li,dt,dd,blockquote,cite,div,h1,h2,h3,h4,h5,h6").forEach((element) => {
element.childNodes.forEach((childNode) => {
if(childNode.nodeType === 3 && /^\s*tktk/.test(childNode.nodeValue)) {
childNode.nodeValue = childNode.nodeValue.replace(/^\s*tktk\s*/gi, "")
element.classList.add('tktk')
}
})
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment