Skip to content

Commit fc2d4d0

Browse files
ShMcKShMcK
committed
syntax highlighting docs
1 parent e66cc2f commit fc2d4d0

14 files changed

+347
-191
lines changed

‎Gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
gem 'github-pages'
22
gem 'jekyll-sitemap'
3+
gem 'rouge'
34
source 'https://rubygems.org'

‎Gemfile.lock

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ PLATFORMS
126126
DEPENDENCIES
127127
github-pages
128128
jekyll-sitemap
129+
rouge
129130

130131
BUNDLED WITH
131132
1.11.2

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ using the coderoad-cli and tools developers already know: markdown and unit test
1515

1616
# Build settings
1717
markdown: kramdown
18+
highlighter: rouge
19+
kramdown:
20+
input: GFM
1821
permalink: pretty
1922

2023
gems:

‎_includes/docs/docs.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<link rel="stylesheet" type="text/css" href="/css/docs.min.css" />
2+
<link rel="stylesheet" type="text/css" href="/css/dark-syntax.css" />
23

34
<section id="docs">
45
<div class="container bs-docs-container">

‎_posts/2016-01-02-development.md

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,24 @@ Running **create** generates:
1919
* an example `test` directory with a few example tests
2020
* a `package.json` configuration with some of the following settings:
2121

22-
23-
{
24-
"name": "coderoad-$TUTORIAL-NAME$",
25-
"version": "0.1.0",
26-
"description": "Coderoad tutorial",
27-
"author": "Name <email> (site)",
28-
"main": "coderoad.json",
29-
"keywords": ["coderoad", "tutorial"],
30-
"dependencies": {
31-
"mocha-coderoad": "^0.3.1"
32-
},
33-
"coderoad": {
34-
"testDir": "test",
35-
"testSuffix": ".spec.js",
36-
"testRunner": "mocha-coderoad"
37-
}
38-
}
22+
```json
23+
{
24+
"name": "coderoad-$TUTORIAL-NAME$",
25+
"version": "0.1.0",
26+
"description": "Coderoad tutorial",
27+
"author": "Name <email> (site)",
28+
"main": "coderoad.json",
29+
"keywords": ["coderoad", "tutorial"],
30+
"dependencies": {
31+
"mocha-coderoad": "^0.3.1"
32+
},
33+
"coderoad": {
34+
"testDir": "test",
35+
"testSuffix": ".spec.js",
36+
"testRunner": "mocha-coderoad"
37+
}
38+
}
39+
```
3940

4041
We'll learn more about these configurations when it's time to [publish](#publish).
4142

@@ -51,9 +52,13 @@ Open a new directory for demoing your tutorial. Setup a new NPM project file.
5152

5253
Add your package name to the `dependencies` in `package.json`:
5354

54-
"dependencies": {
55-
"coderoad-$YOUR-PACKAGE-NAME$": "^0.1.0"
56-
}
55+
```json
56+
{
57+
"dependencies": {
58+
"coderoad-$YOUR-PACKAGE-NAME$": "^0.1.0"
59+
}
60+
}
61+
```
5762

5863
Normally you would use `npm install` to install the package, but your package isn't ready to be published yet. Instead, you need to link your tutorial package to your demo directory.
5964

‎_posts/2016-01-03-tutorial.md

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,25 @@ Each level of header indicates a different section, followed by a description.
1717

1818
As an example:
1919

20-
# Project Title
21-
A description of your project
20+
```markdown
21+
# Project Title
22+
A description of your project
2223

23-
## Chapter One Title
24-
A description of chapter one
24+
## Chapter One Title
25+
A description of chapter one
2526

26-
### Page One Title
27-
A description of page one
27+
### Page One Title
28+
A description of page one
2829

29-
+ A description of task one
30+
+ A description of task one
3031

31-
+ A description of task two
32+
+ A description of task two
3233

33-
### Page Two Title
34-
A description of page two
34+
### Page Two Title
35+
A description of page two
3536

36-
## Chapter Two Title
37-
etc.
37+
## Chapter Two Title
38+
etc.
39+
```
3840

3941
[Read more](https://help.github.com/articles/working-with-advanced-formatting/) about Github Flavored Markdown, including how to write tables & syntax highlight code blocks.

‎_posts/2016-01-04-coderoad-api.md

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,27 @@ Of course Markdown couldn't cover all uses necessary for CodeRoad. Instead, ther
99

1010
For these API features to work, they must be placed at the beginning of a line.
1111

12-
@import('file') // ✓
13-
@import('file') // ✗
12+
```markdown
13+
@import('file') // ✓
14+
@import('file') // ✗
15+
```
1416

1517
Features can be commented out, allowing you to view different files at a time. Be aware the parser matches content from the beginning of a line.
1618

17-
<!-- @import('file') --> // ✗
18-
<!-- @import('file') // ✗
19-
@import('file2') --> // ✓
19+
```markdown
20+
<!-- @import('file') --> // ✗
21+
<!-- @import('file') // ✗
22+
@import('file2') --> // ✓
23+
```
2024

2125
### `@import`
2226

2327
*@import* loads other markdown files. Specify a relative path from the root project directory. If no file extension is provided, it will default to *.md*.
2428

25-
@import('./path/to/file')
26-
@import('./path/to/file.md')
29+
```markdown
30+
@import('./path/to/file')
31+
@import('./path/to/file.md')
32+
```
2733

2834
See an [example](https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/tutorial.md).
2935

@@ -32,15 +38,23 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
3238

3339
Defaults for loading tests are specified in the tutorial *package.json* file.
3440

35-
"config": {
36-
"testDir": "tutorial", // the directory name tests paths will load from
37-
"testSuffix": ".spec.js" // the test file suffix that will be added
38-
}
41+
```json
42+
{
43+
"config": {
44+
"testDir": "tutorial",
45+
"testSuffix": ".spec.js"
46+
}
47+
}
48+
```
49+
50+
`testDir` is appended to all @test calls, and `testSuffix` is added to the end.
3951

4052
*@test* loads a test file. It is important that these files are loaded in the correct order. *@test* can take a single test file, or an array of test files.
4153

42-
@test('path/to/file')
43-
@test(['path/to/file', 'path/to/file2'])
54+
```markdown
55+
@test('path/to/file')
56+
@test(['path/to/file', 'path/to/file2'])
57+
```
4458

4559
The first example would load the file './tutorial/path/to/file.spec.js' in the project root directory.
4660

@@ -52,16 +66,19 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
5266

5367
*@hint* loads a string, or array of strings, which can be used to provide hints for the user.
5468

55-
@hint('A hint for the user')
56-
@hint(['The first hint', 'The second hint'])
69+
```markdown
70+
@hint('A hint for the user')
71+
@hint(['The first hint', 'The second hint'])
72+
```
5773

5874
*@hint* may use code-blocks with syntax highlighting.
5975

60-
61-
@hint(`var a = 42;`)
62-
@hint(```js
63-
var a = 42;
64-
```)
76+
```markdown
77+
@hint(`var a = 42;`)
78+
@hint(```js
79+
var a = 42;
80+
```)
81+
```
6582

6683
### `@action`
6784

@@ -71,32 +88,38 @@ See an [example](https://github.com/coderoad/coderoad-functional-school/blob/mas
7188

7289
Open a file. The path to the file will be from the users root directory.
7390

74-
@action(open('file.js'))
75-
@action(open('path/to/file.js'))
91+
```markdown
92+
@action(open('file.js'))
93+
@action(open('path/to/file.js'))
94+
```
7695

7796
#### set
7897

7998
Replace all text in a file.
8099

81-
@action(set('// hello world'))
82-
@action(set(`// hello world`))
83-
@action(set(```
84-
function sayHello() {
85-
return 'hello world';
86-
}
87-
```))
100+
```markdown
101+
@action(set('// hello world'))
102+
@action(set(`// hello world`))
103+
@action(set(```
104+
function sayHello() {
105+
return 'hello world';
106+
}
107+
```))
108+
```
88109

89110
#### insert
90111

91112
Add text to the bottom of the active text editor.
92113

93-
@action(insert('// hello world'))
94-
@action(insert(`// hello world`))
95-
@action(insert(```
96-
function sayHello() {
97-
return 'hello world';
98-
}
99-
```))
114+
```markdown
115+
@action(insert('// hello world'))
116+
@action(insert(`// hello world`))
117+
@action(insert(```
118+
function sayHello() {
119+
return 'hello world';
120+
}
121+
```))
122+
```
100123

101124
#### What's Next
102125

‎_posts/2016-01-05-tests.md

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,30 @@ Tests are loaded in their order from the tutorial markdown files, and concat tog
1414

1515
Tests should indicate which task they are, in order to quickly determine which task index has failed. For the *mocha-coderoad* test runner, this is as easy as adding the task number to describe block.
1616

17-
describe('01 first task', function () { ... });
18-
describe('04 fourth task', function () { ... });
19-
17+
```js
18+
describe('01 first task');
19+
describe('04 fourth task');
20+
```
2021

2122
### Test Statements
2223

2324
It makes sense to write test statements using 'should', 'must' or negative statements. Remember, the failing test message will be delivered as feedback to the user.
2425

25-
it('should be a function')
26-
it('must be a function')
27-
it('isn\'t a function')
28-
26+
```js
27+
it('should be a function')
28+
it('must be a function')
29+
it('isn\'t a function')
30+
```
2931

3032
### Loaders
3133

3234
Use a **loader** to run the user saved file in the context of your file. Think of a loader as a way to place the file your testing inside of your test file. Import your loader and run it on a specific user file.
3335

34-
var loadJS = require('path/to/loadJS').default;
35-
loadJS('user-file.js');
36-
// adds file contents here
36+
```js
37+
var loadJS = require('path/to/loadJS').default;
38+
loadJS('user-file.js');
39+
// adds file contents here
40+
```
3741

3842
You'll have to roll your own loader to fit your project, but there are example [loaders](#loaders) included later in the docs.
3943

@@ -47,14 +51,18 @@ Data can be loaded in the user's file by setting it as a global within the test.
4751

4852
Although bad practice, it can be easiest to set data to the global scope.
4953

50-
if (!global.data) {
51-
global.data = 43;
52-
}
54+
```js
55+
if (!global.data) {
56+
global.data = 43;
57+
}
5358

54-
if (!global.data2) {
55-
global.data2 = JSON.parse(JSON.stringify(require('./data2.json')));
56-
}
59+
if (!global.data2) {
60+
global.data2 = JSON.parse(JSON.stringify(require('./data2.json')));
61+
}
62+
```
5763

5864
Users can access global data by name in their file.
5965

60-
var secret = data - 1;
66+
```js
67+
var secret = data - 1;
68+
```

0 commit comments

Comments
 (0)