Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Change syntax highlighter to Prism #39

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

Change syntax highlighter to Prism #39

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
e2b9e78
Switch to prism.js for syntax highlighting
obskyr Nov 21, 2015
ecc784d
Document syntax highlighting
obskyr Nov 21, 2015
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
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ Crisp uses Font Awesome for icons. See the Font Awesome documentation for the [f

I have placed some common buttons in **follow.hbs**, with more options in the commented out sections. Make sure to replace the `username` in the URLs so the links point to your profiles.

### Syntax highlighting

[Prism](http://prismjs.com/) is used by Crisp for syntax highlighting. To highlight a certain code block, start it with three backticks and then `language-*`, where `*` is the language the block is written in. For example, to syntax highlight a block of Python code, start it with:

```
```language-python
```

The languages supported out of the box in Crisp are HTML (`language-markup`), CSS, JavaScript, Handlebars, C, C# (`language-csharp`), C++ (`language-cpp`), C-likes (`language-clike`), Python and Ruby. To add more languages, go to [the Prism site](http://prismjs.com/), click "download", choose the languages you want (leave the theme as default), and download the JavaScript and CSS files. Put the resulting `prism.js` in `crisp/assets/js`, and `prism.css` in `crisp/assets/css`.

### Features, Changelog, and Technical Notes

Below is a summary of updates since the initial release. If you need more detail, I suggest reading the [full commit history](https://github.com/kathyqian/crisp-ghost-theme/commits/master/). For an idea of the roadmap and open issues, please refer to the [current open issues](https://github.com/kathyqian/crisp-ghost-theme/issues?state=open).
Expand Down
12 changes: 12 additions & 0 deletions assets/js/prism.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 39 additions & 10 deletions assets/styles/crisp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
* {
padding: 0;
margin: 0;
}
}
/* Basic Typography */
html, body {
font-size: 1em;
line-height: 1.65em;
font-family: "Open Sans", sans-serif;
font-weight: 300;
background: #fff;
background: #fff;
color: #444;
}
html {
height: 100%;
}
body {
padding: 2em 2.5em 1em 20em;
}
}
/* Blocks */
header {
border-right: 1px #eee solid;
Expand Down Expand Up @@ -110,25 +110,54 @@ ul, ol {
margin-left: 3em;
}
code {
font-size:1.4em;
background: #eee;
margin: 0.1em;
padding: 0.2em;
border-radius: 0.25em;
font-family: "Source Code Pro";
font-weight: 300;
font-size: 0.9em;
/* Prism's background color for consistency. */
background: #F5F2F0;
}
pre {
font-size: 0.8em;
line-height: 2em;
background: #eee;
padding: 1em;
line-height: 2em;
background: #F5F2F0;
border-radius: 0.5em;
font-family: "Source Code Pro";
font-weight: 400;
font-size: 0.8em;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
white-space: pre\9;
white-space: pre\9;
}
pre > code {
padding: 0; /* Without this, the first row gets offset by 0.2em. */
background: none;
font-weight: 400;
}
input {
font-size:1em;
padding: 0.3em;
}
/* Prism.js style tweaks */
code[class*="language-"],
pre[class*="language-"] {
font-family: "Source Code Pro";
white-space: -moz-pre-wrap;
white-space: pre-wrap;
white-space: pre\9;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
background: none;
}
/* Sidebar */
header h1 {
font-size:1.9em;
Expand Down Expand Up @@ -171,7 +200,7 @@ header h6 {
}
/* Posts */
article span.post-stamp {
color:#888;
color:#888;
}
h1.post-title {
margin-top:0.35em;
Expand Down
Loading