Skip to content

Commit 537ee54

Browse files
committed
fix syntax highlighting error
1 parent 694cfe4 commit 537ee54

11 files changed

+323
-2
lines changed

lib/markup.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,16 @@ function highlight(description) {
9494
return $.html()
9595
}
9696

97-
function determineLanguage(lang) {
97+
function determineLanguage(maybeFileName) {
98+
const lang = maybeFileName.split('.').pop()
9899
switch (lang) {
99100
case 'js':
100101
case 'javascript':
101102
return 'javascript'
103+
case 'ts':
104+
return 'typescript'
105+
case 'hbs':
106+
return 'handlebars'
102107
default:
103108
return lang
104109
}

package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"server": "http-server -p 5050 --cors tmp",
2626
"serve": "yarn server",
2727
"start": "node index.js",
28-
"test": "eslint lib/**/*.js index.js test/**.js && mocha -r esm test"
28+
"test:mocha": "mocha -r esm test",
29+
"lint": "eslint lib/**/*.js index.js test/**.js",
30+
"test": "yarn lint && yarn test:mocha"
2931
},
3032
"dependencies": {
3133
"cheerio": "^1.0.0-rc.2",

test/markup-test.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import markup from '../lib/markup'
2+
import { assert } from 'chai'
3+
import fs from 'fs'
4+
import { join } from 'path'
5+
6+
function desc(path) {
7+
return {
8+
id: Date.now(),
9+
attributes: {
10+
description: fs.readFileSync(join(__dirname, `./mocks/description/${path}.md`), 'utf-8'),
11+
methods: [],
12+
properties: [],
13+
events: []
14+
}
15+
}
16+
}
17+
18+
function mark(path) {
19+
let data = [
20+
desc(path)
21+
];
22+
let result = markup({data})
23+
let content = result.data[0].attributes.description
24+
maybeWrite(content, path)
25+
return content
26+
}
27+
28+
function maybeWrite(content, path) {
29+
const fsPath = join(__dirname, `./mocks/description/${path}.html`)
30+
if (fs.existsSync(fsPath)) {
31+
return
32+
}
33+
fs.writeFileSync(fsPath, content, 'utf-8')
34+
}
35+
36+
function snapshot(path) {
37+
const fsPath = join(__dirname, `./mocks/description/${path}.html`)
38+
return fs.readFileSync(fsPath, 'utf8')
39+
}
40+
41+
42+
describe('markup', () => {
43+
it('render correct syntax for handlebars with title', function() {
44+
const caseName = 'handlebars-title'
45+
assert.equal(mark(caseName), snapshot(caseName))
46+
})
47+
48+
it('render correct syntax for handlebars without title', function() {
49+
const caseName = 'handlebars'
50+
assert.equal(mark(caseName), snapshot(caseName))
51+
})
52+
53+
it('render correct syntax for javascript with title', function() {
54+
const caseName = 'javascript-title'
55+
assert.equal(mark(caseName), snapshot(caseName))
56+
})
57+
58+
it('render correct syntax for javascript without title', function() {
59+
const caseName = 'javascript'
60+
assert.equal(mark(caseName), snapshot(caseName))
61+
})
62+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<html><head></head><body><div class="highlight handlebars">
2+
<div class="ribbon"></div>
3+
<div class="scroller">
4+
<table class="CodeRay">
5+
<thead>
6+
<tr>
7+
<td colspan="2">profile.hbs</td>
8+
</tr>
9+
</thead>
10+
<tbody>
11+
<tr>
12+
<td class="line-numbers"><pre>1
13+
2
14+
3
15+
</pre></td>
16+
<td class="code"><pre><span class="xml"> <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><span class="template-variable">{{<span class="name">person.title</span>}}</span><span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>
17+
</span><span class="comment">{{! Executed in the component&apos;s context. }}</span><span class="xml">
18+
</span><span class="template-variable">{{<span class="name"><span class="builtin-name">yield</span></span>}}</span><span class="xml"> </span><span class="comment">{{! block contents }}</span></pre></td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
</div>
23+
</div>
24+
25+
<p> If you want to customize the component, in order to
26+
handle events or actions, you implement a subclass
27+
of <code>Ember.Component</code> named after the name of the
28+
component.
29+
For example, you could implement the action
30+
<code>hello</code> for the <code>person-profile</code> component:</p>
31+
<div class="highlight javascript">
32+
<div class="ribbon"></div>
33+
<div class="scroller">
34+
<table class="CodeRay">
35+
<thead>
36+
<tr>
37+
<td colspan="2">profile.js</td>
38+
</tr>
39+
</thead>
40+
<tbody>
41+
<tr>
42+
<td class="line-numbers"><pre>1
43+
2
44+
3
45+
4
46+
5
47+
6
48+
7
49+
8
50+
</pre></td>
51+
<td class="code"><pre> <span class="keyword">import</span> Ember <span class="keyword">from</span> <span class="string">&apos;ember&apos;</span>;
52+
<span class="keyword">export</span> <span class="keyword">default</span> Ember.Component.extend({
53+
<span class="attr">actions</span>: {
54+
<span class="function"><span class="title">hello</span>(<span class="params">name</span>)</span> {
55+
<span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>, name);
56+
}
57+
}
58+
});</pre></td>
59+
</tr>
60+
</tbody>
61+
</table>
62+
</div>
63+
</div>
64+
65+
</body></html>
+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```app/components/person-profile.hbs
2+
<h1>{{person.title}}</h1>
3+
{{! Executed in the component's context. }}
4+
{{yield}} {{! block contents }}
5+
```
6+
If you want to customize the component, in order to
7+
handle events or actions, you implement a subclass
8+
of `Ember.Component` named after the name of the
9+
component.
10+
For example, you could implement the action
11+
`hello` for the `person-profile` component:
12+
```app/components/person-profile.js
13+
import Ember from 'ember';
14+
export default Ember.Component.extend({
15+
actions: {
16+
hello(name) {
17+
console.log("Hello", name);
18+
}
19+
}
20+
});
21+
```
+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<html><head></head><body><div class="highlight handlebars">
2+
<div class="ribbon"></div>
3+
<div class="scroller">
4+
<table class="CodeRay">
5+
<tbody>
6+
<tr>
7+
<td class="line-numbers"><pre>1
8+
2
9+
3
10+
</pre></td>
11+
<td class="code"><pre><span class="xml"> <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><span class="template-variable">{{<span class="name">person.title</span>}}</span><span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>
12+
</span><span class="comment">{{! Executed in the component&apos;s context. }}</span><span class="xml">
13+
</span><span class="template-variable">{{<span class="name"><span class="builtin-name">yield</span></span>}}</span><span class="xml"> </span><span class="comment">{{! block contents }}</span></pre></td>
14+
</tr>
15+
</tbody>
16+
</table>
17+
</div>
18+
</div>
19+
20+
<p> If you want to customize the component, in order to
21+
handle events or actions, you implement a subclass
22+
of <code>Ember.Component</code> named after the name of the
23+
component.
24+
For example, you could implement the action
25+
<code>hello</code> for the <code>person-profile</code> component:</p>
26+
<div class="highlight javascript">
27+
<div class="ribbon"></div>
28+
<div class="scroller">
29+
<table class="CodeRay">
30+
<thead>
31+
<tr>
32+
<td colspan="2">profile.js</td>
33+
</tr>
34+
</thead>
35+
<tbody>
36+
<tr>
37+
<td class="line-numbers"><pre>1
38+
2
39+
3
40+
4
41+
5
42+
6
43+
7
44+
8
45+
</pre></td>
46+
<td class="code"><pre> <span class="keyword">import</span> Ember <span class="keyword">from</span> <span class="string">&apos;ember&apos;</span>;
47+
<span class="keyword">export</span> <span class="keyword">default</span> Ember.Component.extend({
48+
<span class="attr">actions</span>: {
49+
<span class="function"><span class="title">hello</span>(<span class="params">name</span>)</span> {
50+
<span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>, name);
51+
}
52+
}
53+
});</pre></td>
54+
</tr>
55+
</tbody>
56+
</table>
57+
</div>
58+
</div>
59+
60+
</body></html>

test/mocks/description/handlebars.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```hbs
2+
<h1>{{person.title}}</h1>
3+
{{! Executed in the component's context. }}
4+
{{yield}} {{! block contents }}
5+
```
6+
If you want to customize the component, in order to
7+
handle events or actions, you implement a subclass
8+
of `Ember.Component` named after the name of the
9+
component.
10+
For example, you could implement the action
11+
`hello` for the `person-profile` component:
12+
```app/components/person-profile.js
13+
import Ember from 'ember';
14+
export default Ember.Component.extend({
15+
actions: {
16+
hello(name) {
17+
console.log("Hello", name);
18+
}
19+
}
20+
});
21+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html><head></head><body><div class="highlight javascript">
2+
<div class="ribbon"></div>
3+
<div class="scroller">
4+
<table class="CodeRay">
5+
<thead>
6+
<tr>
7+
<td colspan="2">app/routes/articles.js</td>
8+
</tr>
9+
</thead>
10+
<tbody>
11+
<tr>
12+
<td class="line-numbers"><pre>1
13+
2
14+
3
15+
4
16+
5
17+
6
18+
7
19+
8
20+
</pre></td>
21+
<td class="code"><pre><span class="keyword">import</span> <span class="type">Route</span> from &apos;<span class="meta">@ember</span>/routing/route&apos;;
22+
export <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">ArticlesRoute</span> <span class="keyword">extends</span> <span class="title">Route</span> </span>{
23+
resetController(controller, isExiting, transition) {
24+
<span class="keyword">if</span> (isExiting &amp;&amp; transition.targetName !== <span class="symbol">&apos;erro</span>r&apos;) {
25+
controller.set(<span class="symbol">&apos;pag</span>e&apos;, <span class="number">1</span>);
26+
}
27+
}
28+
}</pre></td>
29+
</tr>
30+
</tbody>
31+
</table>
32+
</div>
33+
</div>
34+
35+
</body></html>
+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```app/routes/articles.js
2+
import Route from '@ember/routing/route';
3+
export default class ArticlesRoute extends Route {
4+
resetController(controller, isExiting, transition) {
5+
if (isExiting && transition.targetName !== 'error') {
6+
controller.set('page', 1);
7+
}
8+
}
9+
}
10+
```
+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html><head></head><body><div class="highlight javascript">
2+
<div class="ribbon"></div>
3+
<div class="scroller">
4+
<table class="CodeRay">
5+
<tbody>
6+
<tr>
7+
<td class="line-numbers"><pre>1
8+
2
9+
3
10+
4
11+
5
12+
6
13+
7
14+
8
15+
</pre></td>
16+
<td class="code"><pre><span class="keyword">import</span> <span class="type">Route</span> from &apos;<span class="meta">@ember</span>/routing/route&apos;;
17+
export <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">ArticlesRoute</span> <span class="keyword">extends</span> <span class="title">Route</span> </span>{
18+
resetController(controller, isExiting, transition) {
19+
<span class="keyword">if</span> (isExiting &amp;&amp; transition.targetName !== <span class="symbol">&apos;erro</span>r&apos;) {
20+
controller.set(<span class="symbol">&apos;pag</span>e&apos;, <span class="number">1</span>);
21+
}
22+
}
23+
}</pre></td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
</div>
28+
</div>
29+
30+
</body></html>

test/mocks/description/javascript.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```js
2+
import Route from '@ember/routing/route';
3+
export default class ArticlesRoute extends Route {
4+
resetController(controller, isExiting, transition) {
5+
if (isExiting && transition.targetName !== 'error') {
6+
controller.set('page', 1);
7+
}
8+
}
9+
}
10+
```

0 commit comments

Comments
 (0)