Github Reader CJS

README.md

Github Reader

Download Chrome Extension

https://chrome.google.com/webstore/detail/poakhlngfciodnhlhhgnaaelnpjljija

Open Github file page

Save Script:

Click CJS extension icon:
Paste github-reader-mode.js content into popout window. click save.

github-reader-mode.js

var css = `
.file-header {
    display: none;
}
.file {
    position: fixed;
    z-index: 1000000;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0;
    height: 100%;
    overflow: auto;
    border-radius: 0;
    border: 0;
    background: #292c34;
}

.blob-wrapper {
    padding: 30px 20% 50vh 20%;
}

.file-header {
    background: #02153e;
    border-bottom: 0;
}
table.highlight.tab-size.js-file-line-container {
    background: #292c34;
}

.blob-code-inner {
    color: #dedede;
    font-size: 13px;
}

.blob-num {
    color: #455561;
}

span.pl-c {
    color: #656a6f;
}

.blob-code, .blob-num {
    line-height: 20px;
}
.pl-c /* comment, punctuation.definition.comment, string.comment */ {
  color: #959da5;
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.quote, markup.raw, meta.diff.header */,
.pl-s .pl-v /* string variable */ {
  color: #c8e1ff;
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
  color: #b392f0;
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
  color: #f6f8fa;
}

.pl-ent /* entity.name.tag */ {
  color: #7bcc72;
}

.pl-k /* keyword, storage, storage.type */ {
  color: #ea4a5a;
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
  color: #79b8ff;
}

.pl-v /* variable */,
.pl-ml /* markup.list, sublimelinter.mark.warning */ {
  color: #fb8532;
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
  color: #d73a49;
}

.pl-ii /* invalid.illegal */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2 /* carriage-return */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2::before /* carriage-return */ {
  content: "^M";
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  font-weight: bold;
  color: #7bcc72;
}

.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
  font-weight: bold;
  color: #0366d6;
}

.pl-mi /* markup.italic */ {
  font-style: italic;
  color: #f6f8fa;
}

.pl-mb /* markup.bold */ {
  font-weight: bold;
  color: #f6f8fa;
}

.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
  color: #b31d28;
  background-color: #ffeef0;
}

.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
  color: #176f2c;
  background-color: #f0fff4;
}

.pl-mc /* markup.changed, punctuation.definition.changed */ {
  color: #b08800;
  background-color: #fffdef;
}

.pl-mi2 /* markup.ignored, markup.untracked */ {
  color: #2f363d;
  background-color: #959da5;
}

.pl-mdr /* meta.diff.range */ {
  font-weight: bold;
  color: #b392f0;
}

.pl-mo /* meta.output */ {
  color: #0366d6;
}

.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
  color: #ffeef0;
}

.pl-sg /* sublimelinter.gutter-mark */ {
  color: #6a737d;
}

.pl-corl /* constant.other.reference.link, string.other.link */ {
  text-decoration: underline;
  color: #79b8ff;
}
`
var btn = document.createElement('div')
btn.innerHTML = `<svg data-icon="fullscreen" width="20" height="20" viewBox="0 0 20 20" class="ml-svg-icon"><desc>fullscreen</desc><g><g><g><path d="M3.41,2H6c0.55,0,1-0.45,1-1S6.55,0,6,0H1C0.45,0,0,0.45,0,1v5 c0,0.55,0.45,1,1,1s1-0.45,1-1V3.41l5.29,5.29C7.47,8.89,7.72,9,8,9c0.55,0,1-0.45,1-1c0-0.28-0.11-0.53-0.29-0.71L3.41,2z M8,11 c-0.28,0-0.53,0.11-0.71,0.29L2,16.59V14c0-0.55-0.45-1-1-1s-1,0.45-1,1v5c0,0.55,0.45,1,1,1h5c0.55,0,1-0.45,1-1s-0.45-1-1-1 H3.41l5.29-5.29C8.89,12.53,9,12.28,9,12C9,11.45,8.55,11,8,11z M19,0h-5c-0.55,0-1,0.45-1,1s0.45,1,1,1h2.59l-5.29,5.29 C11.11,7.47,11,7.72,11,8c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29L18,3.41V6c0,0.55,0.45,1,1,1s1-0.45,1-1V1 C20,0.45,19.55,0,19,0z M19,13c-0.55,0-1,0.45-1,1v2.59l-5.29-5.29C12.53,11.11,12.28,11,12,11c-0.55,0-1,0.45-1,1 c0,0.28,0.11,0.53,0.29,0.71L16.59,18H14c-0.55,0-1,0.45-1,1s0.45,1,1,1h5c0.55,0,1-0.45,1-1v-5C20,13.45,19.55,13,19,13z"></path></g></g></g></svg>`
btn.style = `color: #0a1c69;
    cursor: pointer;
    position: absolute;
    top: 55px;
    right: 10px;
    z-index: 1000;`
btn.children[0].style = 'fill: currentColor;'
btn.style.cursor = 'pointer'
btn.addEventListener('click', function () {
  var darkTheme = document.querySelector('#dark-theme')
  if (darkTheme) {
    btn.innerHTML = `<svg style="fill: currentColor;" data-icon="fullscreen" width="20" height="20" viewBox="0 0 20 20" class="ml-svg-icon"><desc>fullscreen</desc><g><g><g><path d="M3.41,2H6c0.55,0,1-0.45,1-1S6.55,0,6,0H1C0.45,0,0,0.45,0,1v5 c0,0.55,0.45,1,1,1s1-0.45,1-1V3.41l5.29,5.29C7.47,8.89,7.72,9,8,9c0.55,0,1-0.45,1-1c0-0.28-0.11-0.53-0.29-0.71L3.41,2z M8,11 c-0.28,0-0.53,0.11-0.71,0.29L2,16.59V14c0-0.55-0.45-1-1-1s-1,0.45-1,1v5c0,0.55,0.45,1,1,1h5c0.55,0,1-0.45,1-1s-0.45-1-1-1 H3.41l5.29-5.29C8.89,12.53,9,12.28,9,12C9,11.45,8.55,11,8,11z M19,0h-5c-0.55,0-1,0.45-1,1s0.45,1,1,1h2.59l-5.29,5.29 C11.11,7.47,11,7.72,11,8c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29L18,3.41V6c0,0.55,0.45,1,1,1s1-0.45,1-1V1 C20,0.45,19.55,0,19,0z M19,13c-0.55,0-1,0.45-1,1v2.59l-5.29-5.29C12.53,11.11,12.28,11,12,11c-0.55,0-1,0.45-1,1 c0,0.28,0.11,0.53,0.29,0.71L16.59,18H14c-0.55,0-1,0.45-1,1s0.45,1,1,1h5c0.55,0,1-0.45,1-1v-5C20,13.45,19.55,13,19,13z"></path></g></g></g></svg>`
    darkTheme.remove()
    btn.style.top = '55px'
    btn.style.right = '10px'
    btn.style.position = 'absolute'
    btn.style.color = '#0a1c69'
  } else {
    var style = document.createElement('style')
    style.innerHTML = css
    style.id = 'dark-theme'
    btn.style.top = '20px'
    btn.style.right = '35px'
    btn.style.color = 'white'
    btn.style.position = 'fixed'
    btn.innerHTML = `<svg style="fill: currentColor;" data-icon="minimize" width="20" height="20" viewBox="0 0 20 20" class="ml-svg-icon"><desc>minimize</desc><g><g><g><path d="M8,11H3c-0.55,0-1,0.45-1,1s0.45,1,1,1h2.59l-5.29,5.29C0.11,18.47,0,18.72,0,19 c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29L7,14.41V17c0,0.55,0.45,1,1,1s1-0.45,1-1v-5C9,11.45,8.55,11,8,11z M20,1 c0-0.55-0.45-1-1-1c-0.28,0-0.53,0.11-0.71,0.29L13,5.59V3c0-0.55-0.45-1-1-1s-1,0.45-1,1v5c0,0.55,0.45,1,1,1h5 c0.55,0,1-0.45,1-1s-0.45-1-1-1h-2.59l5.29-5.29C19.89,1.53,20,1.28,20,1z"></path></g></g></g></svg>`
    document.head.appendChild(style)
  }
}, false)
document.querySelector('.blob-wrapper').prepend(btn)