Skip to content

fix highlighting for code blocks with file names #97

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

Merged
merged 2 commits into from
Mar 2, 2021
Merged

fix highlighting for code blocks with file names #97

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
537ee54
fix syntax highlighting error
lifeart Mar 1, 2021
1836fd7
remove extra semicolon
lifeart Mar 2, 2021
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
7 changes: 6 additions & 1 deletion lib/markup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,16 @@ function highlight(description) {
return $.html()
}

function determineLanguage(lang) {
function determineLanguage(maybeFileName) {
const lang = maybeFileName.split('.').pop()
switch (lang) {
case 'js':
case 'javascript':
return 'javascript'
case 'ts':
return 'typescript'
case 'hbs':
return 'handlebars'
default:
return lang
}
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
"server": "http-server -p 5050 --cors tmp",
"serve": "yarn server",
"start": "node index.js",
"test": "eslint lib/**/*.js index.js test/**.js && mocha -r esm test"
"test:mocha": "mocha -r esm test",
"lint": "eslint lib/**/*.js index.js test/**.js",
"test": "yarn lint && yarn test:mocha"
},
"dependencies": {
"cheerio": "^1.0.0-rc.2",
Expand Down
62 changes: 62 additions & 0 deletions test/markup-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import markup from '../lib/markup'
import { assert } from 'chai'
import fs from 'fs'
import { join } from 'path'

function desc(path) {
return {
id: Date.now(),
attributes: {
description: fs.readFileSync(join(__dirname, `./mocks/description/${path}.md`), 'utf-8'),
methods: [],
properties: [],
events: []
}
}
}

function mark(path) {
let data = [
desc(path)
]
let result = markup({data})
let content = result.data[0].attributes.description
maybeWrite(content, path)
return content
}

function maybeWrite(content, path) {
const fsPath = join(__dirname, `./mocks/description/${path}.html`)
if (fs.existsSync(fsPath)) {
return
}
fs.writeFileSync(fsPath, content, 'utf-8')
}

function snapshot(path) {
const fsPath = join(__dirname, `./mocks/description/${path}.html`)
return fs.readFileSync(fsPath, 'utf8')
}


describe('markup', () => {
it('render correct syntax for handlebars with title', function() {
const caseName = 'handlebars-title'
assert.equal(mark(caseName), snapshot(caseName))
})

it('render correct syntax for handlebars without title', function() {
const caseName = 'handlebars'
assert.equal(mark(caseName), snapshot(caseName))
})

it('render correct syntax for javascript with title', function() {
const caseName = 'javascript-title'
assert.equal(mark(caseName), snapshot(caseName))
})

it('render correct syntax for javascript without title', function() {
const caseName = 'javascript'
assert.equal(mark(caseName), snapshot(caseName))
})
})
65 changes: 65 additions & 0 deletions test/mocks/description/handlebars-title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<html><head></head><body><div class="highlight handlebars">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<thead>
<tr>
<td colspan="2">profile.hbs</td>
</tr>
</thead>
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
</pre></td>
<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>
</span><span class="comment">{{! Executed in the component&apos;s context. }}</span><span class="xml">
</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>
</tr>
</tbody>
</table>
</div>
</div>

<p> If you want to customize the component, in order to
handle events or actions, you implement a subclass
of <code>Ember.Component</code> named after the name of the
component.
For example, you could implement the action
<code>hello</code> for the <code>person-profile</code> component:</p>
<div class="highlight javascript">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<thead>
<tr>
<td colspan="2">profile.js</td>
</tr>
</thead>
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
4
5
6
7
8
</pre></td>
<td class="code"><pre> <span class="keyword">import</span> Ember <span class="keyword">from</span> <span class="string">&apos;ember&apos;</span>;
<span class="keyword">export</span> <span class="keyword">default</span> Ember.Component.extend({
<span class="attr">actions</span>: {
<span class="function"><span class="title">hello</span>(<span class="params">name</span>)</span> {
<span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>, name);
}
}
});</pre></td>
</tr>
</tbody>
</table>
</div>
</div>

</body></html>
21 changes: 21 additions & 0 deletions test/mocks/description/handlebars-title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
```app/components/person-profile.hbs
<h1>{{person.title}}</h1>
{{! Executed in the component's context. }}
{{yield}} {{! block contents }}
```
If you want to customize the component, in order to
handle events or actions, you implement a subclass
of `Ember.Component` named after the name of the
component.
For example, you could implement the action
`hello` for the `person-profile` component:
```app/components/person-profile.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
hello(name) {
console.log("Hello", name);
}
}
});
```
60 changes: 60 additions & 0 deletions test/mocks/description/handlebars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<html><head></head><body><div class="highlight handlebars">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
</pre></td>
<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>
</span><span class="comment">{{! Executed in the component&apos;s context. }}</span><span class="xml">
</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>
</tr>
</tbody>
</table>
</div>
</div>

<p> If you want to customize the component, in order to
handle events or actions, you implement a subclass
of <code>Ember.Component</code> named after the name of the
component.
For example, you could implement the action
<code>hello</code> for the <code>person-profile</code> component:</p>
<div class="highlight javascript">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<thead>
<tr>
<td colspan="2">profile.js</td>
</tr>
</thead>
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
4
5
6
7
8
</pre></td>
<td class="code"><pre> <span class="keyword">import</span> Ember <span class="keyword">from</span> <span class="string">&apos;ember&apos;</span>;
<span class="keyword">export</span> <span class="keyword">default</span> Ember.Component.extend({
<span class="attr">actions</span>: {
<span class="function"><span class="title">hello</span>(<span class="params">name</span>)</span> {
<span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>, name);
}
}
});</pre></td>
</tr>
</tbody>
</table>
</div>
</div>

</body></html>
21 changes: 21 additions & 0 deletions test/mocks/description/handlebars.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
```hbs
<h1>{{person.title}}</h1>
{{! Executed in the component's context. }}
{{yield}} {{! block contents }}
```
If you want to customize the component, in order to
handle events or actions, you implement a subclass
of `Ember.Component` named after the name of the
component.
For example, you could implement the action
`hello` for the `person-profile` component:
```app/components/person-profile.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
hello(name) {
console.log("Hello", name);
}
}
});
```
35 changes: 35 additions & 0 deletions test/mocks/description/javascript-title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<html><head></head><body><div class="highlight javascript">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<thead>
<tr>
<td colspan="2">app/routes/articles.js</td>
</tr>
</thead>
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
4
5
6
7
8
</pre></td>
<td class="code"><pre><span class="keyword">import</span> <span class="type">Route</span> from &apos;<span class="meta">@ember</span>/routing/route&apos;;
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>{
resetController(controller, isExiting, transition) {
<span class="keyword">if</span> (isExiting &amp;&amp; transition.targetName !== <span class="symbol">&apos;erro</span>r&apos;) {
controller.set(<span class="symbol">&apos;pag</span>e&apos;, <span class="number">1</span>);
}
}
}</pre></td>
</tr>
</tbody>
</table>
</div>
</div>

</body></html>
10 changes: 10 additions & 0 deletions test/mocks/description/javascript-title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
```app/routes/articles.js
import Route from '@ember/routing/route';
export default class ArticlesRoute extends Route {
resetController(controller, isExiting, transition) {
if (isExiting && transition.targetName !== 'error') {
controller.set('page', 1);
}
}
}
```
30 changes: 30 additions & 0 deletions test/mocks/description/javascript.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html><head></head><body><div class="highlight javascript">
<div class="ribbon"></div>
<div class="scroller">
<table class="CodeRay">
<tbody>
<tr>
<td class="line-numbers"><pre>1
2
3
4
5
6
7
8
</pre></td>
<td class="code"><pre><span class="keyword">import</span> <span class="type">Route</span> from &apos;<span class="meta">@ember</span>/routing/route&apos;;
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>{
resetController(controller, isExiting, transition) {
<span class="keyword">if</span> (isExiting &amp;&amp; transition.targetName !== <span class="symbol">&apos;erro</span>r&apos;) {
controller.set(<span class="symbol">&apos;pag</span>e&apos;, <span class="number">1</span>);
}
}
}</pre></td>
</tr>
</tbody>
</table>
</div>
</div>

</body></html>
10 changes: 10 additions & 0 deletions test/mocks/description/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
```js
import Route from '@ember/routing/route';
export default class ArticlesRoute extends Route {
resetController(controller, isExiting, transition) {
if (isExiting && transition.targetName !== 'error') {
controller.set('page', 1);
}
}
}
```