Skip to content

Syntax highlighting #12

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Syntax highlighting #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82f7730
Add prism.js support for syntax highlighting
peblair Jul 8, 2017
5a9f6b2
Make methods in homepage examples fit better
peblair Jul 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 226 additions & 0 deletions site/css/prism.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
/* http://prismjs.com/download.html?themes=prism-coy&languages=clike+javascript+ruby+java+python+scheme */
/**
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
* @author Tim Shedor
*/

/**
* UNUSED, but kept checked-in for reference.
*/

code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
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-"] {
position: relative;
margin: .5em 0;
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
border-left: 10px solid #358ccb;
background-color: #fdfdfd;
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-size: 3em 3em;
background-origin: content-box;
overflow: visible;
padding: 0;
}

code[class*="language"] {
max-height: inherit;
height: 100%;
padding: 0 1em;
display: block;
overflow: auto;
}

/* Margin bottom to accomodate shadow */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color: #fdfdfd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 1em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
position: relative;
padding: .2em;
border-radius: 0.3em;
color: #c92c2c;
border: 1px solid rgba(0, 0, 0, 0.1);
display: inline;
white-space: normal;
}

pre[class*="language-"]:before,
pre[class*="language-"]:after {
content: '';
z-index: -2;
display: block;
position: absolute;
bottom: 0.75em;
left: 0.18em;
width: 40%;
height: 20%;
max-height: 13em;
box-shadow: 0px 13px 8px #979797;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}

:not(pre) > code[class*="language-"]:after,
pre[class*="language-"]:after {
right: 0.75em;
left: auto;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7D8B99;
}

.token.punctuation {
color: #5F6364;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
color: #c92c2c;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
color: #2f9c0a;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
color: #1990b8;
}

.token.regex,
.token.important {
color: #e90;
}

.language-css .token.string,
.style .token.string {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}

.token.important {
font-weight: normal;
}

.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}

.namespace {
opacity: .7;
}

@media screen and (max-width: 767px) {
pre[class*="language-"]:before,
pre[class*="language-"]:after {
bottom: 14px;
box-shadow: none;
}

}

/* Plugin styles */
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
color: #e0d7d1;
}

/* Plugin styles: Line Numbers */
pre[class*="language-"].line-numbers {
padding-left: 0;
}

pre[class*="language-"].line-numbers code {
padding-left: 3.8em;
}

pre[class*="language-"].line-numbers .line-numbers-rows {
left: 0;
}

/* Plugin styles: Line Highlight */
pre[class*="language-"][data-line] {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
}
pre[data-line] code {
position: relative;
padding-left: 4em;
}
pre .line-highlight {
margin-top: 0;
}
68 changes: 68 additions & 0 deletions site/css/pyret.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.CodeMirror, .inlineExample { line-height: 1.5; border: 1px solid black; background: #f8f8f8; color: #eee; }
.CodeMirror div.CodeMirror-cursors { z-index: 9500; }
.CodeMirror div.CodeMirror-cursor { border-left: 2px solid #111; }

.cptteach-fixed { line-height: 1.5; background: #ddd; }
.CodeMirror-matchingbracket {
position: relative;
}
.CodeMirror-matchingbracket::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 0px solid rgb(90, 149, 217);
z-index: 1000;
}
.CodeMirror-matchingbracket.open::before {
border-width: 0.3ex 0px 0px 0.3ex;
border-top-left-radius: 0.4ex;
margin: -0.3ex;
}
.CodeMirror-matchingbracket.close::before {
border-width: 0px 0.3ex 0.3ex 0px;
border-bottom-right-radius: 0.4ex;
margin: 0.3ex;
}
div.CodeMirror span.CodeMirror-matchingbracket-region {
position: relative;
background-color: hsl(220, 100%, 95%);
border-top: 0.1em solid hsl(220, 100%, 95%);
border-bottom: 0.1em solid hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket-region:last-of-type {
box-shadow: 0.5em 0 0.25em hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket-region:first-of-type {
box-shadow: -0.5em 0 0.25em hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket-region:first-of-type:last-of-type {
box-shadow: -0.5em 0 0.25em hsl(220, 100%, 95%), 0.5em 0 0.25em hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket.open {
box-shadow: -0.3ex 0 0.3ex hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket.open:last-of-type {
box-shadow: 0.5em 0 0.25em hsl(220, 100%, 95%), -0.3ex 0 0.3ex hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket.close {
box-shadow: 0.3ex 0 0.3ex hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket.close:first-of-type {
box-shadow: -0.5em 0 0.25em hsl(220, 100%, 95%), 0.3ex 0 0.3ex hsl(220, 100%, 95%);
}
div.CodeMirror span.CodeMirror-matchingbracket {
font-weight: 600;
color: initial;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
font-weight: bold;
background-color: #fdd;
color: #e11;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket-region {
background-color: #fdc;
border-top: 0.1em solid #fdd;
border-bottom: 0.1em solid #fdd;
z-index: 4000;
}
17 changes: 17 additions & 0 deletions site/css/theme-coy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.cm-s-default.CodeMirror { color: black; }
.cm-s-default .cm-comment, .token.comment, .token.block-comment { color: #cd7054; }
.cm-s-default .cm-boolean, .token.boolean { color: #c92c2c; }
.cm-s-default .cm-builtin, .token.punctuation .token.operator { color: #5F6364; }
.cm-s-default .cm-function-name, .token.function-name, .token.function { color: #2f9c0a; }
.cm-s-default .cm-variable, .token.variable {

}
.cm-s-default .cm-keyword, .token.keyword { color: #1990b8; font-weight: bold; }
.cm-s-default .cm-number, .token.number { color: #c92c2c; }
.cm-s-default .cm-roughnum { color: #c92c2c; }
.cm-s-default .cm-bad-number { color: red; font-weight: bold; }
.cm-s-default .cm-string, .token.string { color: #a67f59; }
.cm-s-default .cm-unterminated-string { color: red; font-weight: bold; }
.cm-s-default .cm-type, .token.class-name { color: #374049; }


15 changes: 15 additions & 0 deletions site/css/theme-cpo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.cm-s-default.CodeMirror { color: black; }
.cm-s-default .cm-comment, .token.comment, .token.block-comment { color: #cd7054; }
.cm-s-default .cm-boolean, .token.boolean { color: darkred; }
.cm-s-default .cm-builtin, .token.punctuation .token.operator { color: #555; }
.cm-s-default .cm-function-name, .token.function-name, .token.function { color: #374049; }
.cm-s-default .cm-variable, .token.variable { color: #4d5966; }
.cm-s-default .cm-keyword, .token.keyword { color: black; font-weight: bold; }
.cm-s-default .cm-number, .token.number { color: navy; }
.cm-s-default .cm-roughnum { color: blue; }
.cm-s-default .cm-bad-number { color: red; font-weight: bold; }
.cm-s-default .cm-string, .token.string { color: forestgreen; }
.cm-s-default .cm-unterminated-string { color: red; font-weight: bold; }
.cm-s-default .cm-type { color: #374049; }


Loading