Skip to content

Commit d166fef

Browse files
LucaScorpionLucaScorpion
authored
Several improvements (#3)
* Slightly increase the padding for better visual balance * Update node-sass to 4.14.1 * Set node-sass output style to compressed * Various improvements to the docs styling, add usage instructions
1 parent a8ac453 commit d166fef

File tree

10 files changed

+294
-256
lines changed

10 files changed

+294
-256
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
node_modules/
33

44
# Build output
5-
/darcula.css
5+
darcula.css
66

7-
# JetBrains
7+
# IDEs
88
.idea/

‎.npmignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Docs
22
docs/
33

4-
# JetBrains
4+
# IDEs
55
.idea/

‎README.md‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@ A syntax highlighting theme for [PrismJS] based on the Darcula theme from the [J
77

88
## Examples
99

10-
Check out the [examples on GitHub pages](https://lucascorpion.github.io/prismjs-darcula-theme) for:
11-
12-
- JavaScript
13-
- HTML
14-
- Java
15-
- CSS
16-
- JSON
17-
- YAML
10+
Check out the examples on [GitHub pages](https://lucascorpion.github.io/prismjs-darcula-theme).
1811

1912
## Usage
2013

14+
### HTML
15+
16+
Download and include the compiled stylesheet in the `head` of your html:
17+
18+
```html
19+
<link href="darcula.css" rel="stylesheet"/>
20+
```
21+
2122
### Gatsby
2223

2324
This theme can be used in Gatsby with [gatsby-remark-prismjs]. Simply install the package using:
@@ -32,17 +33,11 @@ And add this line in `gatsby-browser.js`:
3233
import 'prismjs-darcula-theme/darcula.css';
3334
```
3435

35-
Alternatively, if you're using [gatsby-plugin-sass] you can use the original SCSS:
36-
37-
```js
38-
import 'prismjs-darcula-theme/darcula.scss';
39-
```
40-
4136
## Development
4237

4338
Run `npm run docs:watch` to watch `darcula.scss` for file changes, compiling it to `docs/darcula.css`. To compile the file without watching for changes, use `npm run docs`. Open `docs/index.html` in your browser to view the results.
4439

4540
[PrismJS]: https://prismjs.com
4641
[JetBrains]: https://www.jetbrains.com
4742
[gatsby-remark-prismjs]: https://www.gatsbyjs.org/packages/gatsby-remark-prismjs
48-
[gatsby-plugin-sass]: https://www.gatsbyjs.org/packages/gatsby-plugin-sass
43+
[gatsby-plugin-sass]: https://www.gatsbyjs.org/packages/gatsby-plugin-sass

‎darcula.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $brown: #8a653b;
1616
$fonts: Source Code Pro, PT Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
1717
$font-size: 16px;
1818
$line-height: 20px;
19-
$padding: 2px 5px;
19+
$padding: 4px 8px 6px;
2020
$tab-size: 4;
2121

2222
pre,
@@ -138,6 +138,8 @@ pre[class*="language-"] {
138138
}
139139
}
140140

141+
// Language-specific colors.
142+
141143
.language-json .token {
142144
&.property {
143145
color: $purple;

‎docs/darcula.css‎

Lines changed: 1 addition & 89 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<title>PrismJS Darcula Theme</title>
5-
6-
<link href="style.css" rel="stylesheet"/>
7-
<link href="darcula.css" rel="stylesheet"/>
5+
<link href="style.css" rel="stylesheet" />
6+
<link href="darcula.css" rel="stylesheet" />
87
<script src="prism.js"></script>
98
</head>
109
<body>
11-
1210
<a class="top-right" href="https://github.com/LucaScorpion/prismjs-darcula-theme">
1311
<img src="fork-me.png" alt="Fork me on GitHub">
1412
</a>
1513

1614
<h1>PrismJS Darcula Theme</h1>
1715
GitHub: <a href="https://github.com/LucaScorpion/prismjs-darcula-theme">LucaScorpion/prismjs-darcula-theme</a>
1816

17+
<h2>Usage</h2>
18+
19+
<h3>HTML</h3>
20+
Download and include the compiled stylesheet in the <code class="language-none">head</code> of your html:
21+
<pre><code class="language-html">&lt;link href="darcula.css" rel="stylesheet"/&gt;</code></pre>
22+
23+
<h3>Gatsby</h3>
24+
This theme can be used in Gatsby with
25+
<a href="https://www.gatsbyjs.org/packages/gatsby-remark-prismjs" target="_blank" rel="noopener noreferrer">gatsby-remark-prismjs</a>.
26+
Simply install the package using:
27+
<pre><code class="language-shell">npm install prismjs-darcula-theme</code></pre>
28+
And add this line in <code class="language-none">gatsby-browser.js</code>:
29+
<pre><code class="language-js">import 'prismjs-darcula-theme/darcula.css';</code></pre>
30+
1931
<h2>Examples</h2>
2032

2133
<h3>JavaScript</h3>

0 commit comments

Comments
 (0)