Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Updating CodeMirror and adding support for a few new languages. (#269)
Browse files Browse the repository at this point in the history
* Updating CodeMirror and adding support for a few different languages.

* Extending syntax-highlighter to support Dockerfiles.
  • Loading branch information
erunion authored Aug 8, 2019
1 parent 9e52693 commit d93cbea
Show file tree
Hide file tree
Showing 12 changed files with 205 additions and 116 deletions.
60 changes: 42 additions & 18 deletions example/bundle-hub2.css
Original file line number Diff line number Diff line change
Expand Up @@ -9360,22 +9360,40 @@ body.page-password footer,
-ms-animation-duration: 2s;
animation-duration: 2s;
}
.is-lang-c #hub-reference .hub-api .code-sample .hub-lang-c {
display: block;
}
.is-lang-c #hub-reference .hub-api .code-sample .hub-lang-switch-c {
color: #fff;
}
.is-lang-cplusplus #hub-reference .hub-api .code-sample .hub-lang-cplusplus {
display: block;
}
.is-lang-cplusplus #hub-reference .hub-api .code-sample .hub-lang-switch-cplusplus {
color: #fff;
}
.is-lang-csharp #hub-reference .hub-api .code-sample .hub-lang-csharp {
display: block;
}
.is-lang-csharp #hub-reference .hub-api .code-sample .hub-lang-switch-csharp {
color: #fff;
}
.is-lang-curl #hub-reference .hub-api .code-sample .hub-lang-curl {
display: block;
}
.is-lang-curl #hub-reference .hub-api .code-sample .hub-lang-switch-curl {
color: #fff;
}
.is-lang-node #hub-reference .hub-api .code-sample .hub-lang-node {
.is-lang-go #hub-reference .hub-api .code-sample .hub-lang-go {
display: block;
}
.is-lang-node #hub-reference .hub-api .code-sample .hub-lang-switch-node {
.is-lang-go #hub-reference .hub-api .code-sample .hub-lang-switch-go {
color: #fff;
}
.is-lang-ruby #hub-reference .hub-api .code-sample .hub-lang-ruby {
.is-lang-java #hub-reference .hub-api .code-sample .hub-lang-java {
display: block;
}
.is-lang-ruby #hub-reference .hub-api .code-sample .hub-lang-switch-ruby {
.is-lang-java #hub-reference .hub-api .code-sample .hub-lang-switch-java {
color: #fff;
}
.is-lang-javascript #hub-reference .hub-api .code-sample .hub-lang-javascript {
Expand All @@ -9384,46 +9402,52 @@ body.page-password footer,
.is-lang-javascript #hub-reference .hub-api .code-sample .hub-lang-switch-javascript {
color: #fff;
}
.is-lang-python #hub-reference .hub-api .code-sample .hub-lang-python {
.is-lang-kotlin #hub-reference .hub-api .code-sample .hub-lang-kotlin {
display: block;
}
.is-lang-python #hub-reference .hub-api .code-sample .hub-lang-switch-python {
.is-lang-kotlin #hub-reference .hub-api .code-sample .hub-lang-switch-kotlin {
color: #fff;
}
.is-lang-php #hub-reference .hub-api .code-sample .hub-lang-php {
.is-lang-node #hub-reference .hub-api .code-sample .hub-lang-node {
display: block;
}
.is-lang-php #hub-reference .hub-api .code-sample .hub-lang-switch-php {
.is-lang-node #hub-reference .hub-api .code-sample .hub-lang-switch-node {
color: #fff;
}
.is-lang-swift #hub-reference .hub-api .code-sample .hub-lang-swift {
.is-lang-objectivec #hub-reference .hub-api .code-sample .hub-lang-objectivec {
display: block;
}
.is-lang-swift #hub-reference .hub-api .code-sample .hub-lang-switch-swift {
.is-lang-objectivec #hub-reference .hub-api .code-sample .hub-lang-switch-objectivec {
color: #fff;
}
.is-lang-objectivec #hub-reference .hub-api .code-sample .hub-lang-objectivec {
.is-lang-php #hub-reference .hub-api .code-sample .hub-lang-php {
display: block;
}
.is-lang-objectivec #hub-reference .hub-api .code-sample .hub-lang-switch-objectivec {
.is-lang-php #hub-reference .hub-api .code-sample .hub-lang-switch-php {
color: #fff;
}
.is-lang-csharp #hub-reference .hub-api .code-sample .hub-lang-csharp {
.is-lang-powershell #hub-reference .hub-api .code-sample .hub-lang-powershell {
display: block;
}
.is-lang-csharp #hub-reference .hub-api .code-sample .hub-lang-switch-csharp {
.is-lang-powershell #hub-reference .hub-api .code-sample .hub-lang-switch-powershell {
color: #fff;
}
.is-lang-java #hub-reference .hub-api .code-sample .hub-lang-java {
.is-lang-python #hub-reference .hub-api .code-sample .hub-lang-python {
display: block;
}
.is-lang-java #hub-reference .hub-api .code-sample .hub-lang-switch-java {
.is-lang-python #hub-reference .hub-api .code-sample .hub-lang-switch-python {
color: #fff;
}
.is-lang-go #hub-reference .hub-api .code-sample .hub-lang-go {
.is-lang-ruby #hub-reference .hub-api .code-sample .hub-lang-ruby {
display: block;
}
.is-lang-go #hub-reference .hub-api .code-sample .hub-lang-switch-go {
.is-lang-ruby #hub-reference .hub-api .code-sample .hub-lang-switch-ruby {
color: #fff;
}
.is-lang-swift #hub-reference .hub-api .code-sample .hub-lang-swift {
display: block;
}
.is-lang-swift #hub-reference .hub-api .code-sample .hub-lang-switch-swift {
color: #fff;
}
#hub-reference .hub-api .code-sample .docs-right {
Expand Down
18 changes: 17 additions & 1 deletion example/swagger-files/examples.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,5 +90,21 @@
},
"x-explorer-enabled": true,
"x-samples-enabled": true,
"x-samples-languages": ["curl", "node", "ruby", "javascript", "python"]
"x-samples-languages": [
"c",
"cplusplus",
"csharp",
"curl",
"go",
"java",
"javascript",
"kotlin",
"node",
"objectivec",
"php",
"powershell",
"python",
"ruby",
"swift"
]
}
15 changes: 15 additions & 0 deletions packages/api-explorer/__tests__/lib/generate-code-snippet.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,25 @@ test('should return with unhighlighted code', () => {

describe('#getLangName()', () => {
it('should convert name to correct case', () => {
expect(getLangName('c')).toBe('C');
expect(getLangName('cplusplus')).toBe('C++');
expect(getLangName('csharp')).toBe('C#');
expect(getLangName('curl')).toBe('cURL');
expect(getLangName('go')).toBe('Go');
expect(getLangName('java')).toBe('Java');
expect(getLangName('javascript')).toBe('JavaScript');
expect(getLangName('kotlin')).toBe('Kotlin');
expect(getLangName('node')).toBe('Node');
expect(getLangName('objectivec')).toBe('Objective-C');
expect(getLangName('php')).toBe('PHP');
expect(getLangName('powershell')).toBe('PowerShell');
expect(getLangName('python')).toBe('Python');
expect(getLangName('ruby')).toBe('Ruby');
expect(getLangName('swift')).toBe('Swift');
});

it('should pass through unknown values', () => {
expect(getLangName('HTTP')).toBe('HTTP');
expect(getLangName('unknown')).toBe('unknown');
});
});
78 changes: 43 additions & 35 deletions packages/api-explorer/src/lib/generate-code-snippet.js
Original file line number Diff line number Diff line change
@@ -1,62 +1,68 @@
const HTTPSnippet = require('httpsnippet');
const generateHar = require('./oas-to-har');
const syntaxHighlighter = require('@readme/syntax-highlighter');
const uppercase = require('@readme/syntax-highlighter/uppercase');

const supportedLanguages = {
node: {
httpsnippet: ['node', 'request'],
highlight: 'javascript',
name: 'Node',
c: {
httpsnippet: ['c'],
highlight: 'text/x-csrc',
},
cplusplus: {
httpsnippet: ['c'],
highlight: 'text/x-c++src',
},
csharp: {
httpsnippet: ['csharp', 'restsharp'],
highlight: 'text/x-csharp',
},
curl: {
httpsnippet: ['shell', 'curl'],
highlight: 'shell',
name: 'cURL',
},
ruby: {
httpsnippet: ['ruby'],
highlight: 'ruby',
name: 'Ruby',
go: {
httpsnippet: ['go', 'native'],
highlight: 'go',
},
java: {
httpsnippet: ['java', 'okhttp'],
highlight: 'java',
},
javascript: {
httpsnippet: ['javascript', 'xhr', { cors: false }],
highlight: 'javascript',
name: 'JavaScript',
},
kotlin: {
httpsnippet: ['java', 'okhttp'],
highlight: 'java',
},
node: {
httpsnippet: ['node', 'request'],
highlight: 'javascript',
},
objectivec: {
httpsnippet: ['objc', 'NSURLSession'],
highlight: 'objectivec',
name: 'Objective-C',
},
python: {
httpsnippet: ['python', 'requests'],
highlight: 'python',
name: 'Python',
},
java: {
httpsnippet: ['java', 'okhttp'],
highlight: 'java',
name: 'Java',
},
php: {
httpsnippet: ['php', 'curl'],
highlight: 'php',
name: 'PHP',
},
csharp: {
httpsnippet: ['csharp', 'restsharp'],
highlight: 'text/x-csharp',
name: 'C#',
powershell: {
httpsnippet: ['powershell'],
highlight: 'powershell',
},
python: {
httpsnippet: ['python', 'requests'],
highlight: 'python',
},
ruby: {
httpsnippet: ['ruby'],
highlight: 'ruby',
},
swift: {
httpsnippet: ['swift', 'nsurlsession'],
highlight: 'swift',
name: 'Swift',
},
go: {
httpsnippet: ['go', 'native'],
highlight: 'go',
name: 'Go',
},
};

Expand All @@ -76,8 +82,10 @@ module.exports = (oas, operation, values, auth, lang) => {

const code = snippet.convert(...language.httpsnippet);

return { snippet: syntaxHighlighter(code, language.highlight, { dark: true }), code };
return {
snippet: syntaxHighlighter(code, language.highlight, { dark: true }),
code,
};
};

module.exports.getLangName = lang =>
supportedLanguages[lang] ? supportedLanguages[lang].name : lang;
module.exports.getLangName = lang => (supportedLanguages[lang] ? uppercase(lang) : lang);
12 changes: 7 additions & 5 deletions packages/syntax-highlighter/codemirror.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ const { VARIABLE_REGEXP } = Variable;
require('codemirror/addon/runmode/runmode');
require('codemirror/mode/meta.js');

require('codemirror/mode/shell/shell');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/ruby/ruby');
require('codemirror/mode/python/python');
require('codemirror/mode/clike/clike');
require('codemirror/mode/dockerfile/dockerfile');
require('codemirror/mode/go/go');
require('codemirror/mode/htmlmixed/htmlmixed');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/php/php');
require('codemirror/mode/go/go');
require('codemirror/mode/powershell/powershell');
require('codemirror/mode/python/python');
require('codemirror/mode/ruby/ruby');
require('codemirror/mode/shell/shell');
require('codemirror/mode/swift/swift');

function getMode(lang) {
Expand Down
32 changes: 16 additions & 16 deletions packages/syntax-highlighter/modes.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,26 @@
// We also have the mimeType to potentially in future load
// in new types dynamically
module.exports = {
html: 'htmlmixed',
json: ['javascript', 'application/ld+json'],
text: ['null', 'text/plain'],
markdown: 'gfm',
stylus: 'scss',
bash: 'shell',
mysql: 'sql',
sql: ['sql', 'text/x-sql'],
curl: 'shell',
asp: 'clike',
csharp: ['clike', 'text/x-csharp'],
cplusplus: ['clike', 'text/x-c++src'],
bash: 'shell',
c: 'clike',
cplusplus: ['clike', 'text/x-c++src'],
csharp: ['clike', 'text/x-csharp'],
curl: 'shell',
go: ['go', 'text/x-go'],
html: 'htmlmixed',
java: ['clike', 'text/x-java'],
scala: ['clike', 'text/x-scala'],
objectivec: ['clike', 'text/x-objectivec'],
json: ['javascript', 'application/ld+json'],
kotlin: ['clike', 'text/x-kotlin'],
typescript: ['javascript', 'text/typescript'],
liquid: 'htmlmixed',
scss: 'css',
markdown: 'gfm',
mysql: 'sql',
objectivec: ['clike', 'text/x-objectivec'],
php: ['php', 'text/x-php'],
go: ['go', 'text/x-go'],
scala: ['clike', 'text/x-scala'],
scss: 'css',
sql: ['sql', 'text/x-sql'],
stylus: 'scss',
text: ['null', 'text/plain'],
typescript: ['javascript', 'text/typescript'],
};
10 changes: 5 additions & 5 deletions packages/syntax-highlighter/package-lock.json

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

3 changes: 2 additions & 1 deletion packages/syntax-highlighter/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
"version": "4.6.0",
"dependencies": {
"@readme/variable": "^4.3.2",
"codemirror": "^5.31.0",
"codemirror": "^5.48.2",
"react": "^16.4.2"
},
"scripts": {
"lint": "eslint -f unix . --ext .jsx --ext .js",
"inspect": "jsinspect",
"prettier:write": "prettier --write \"./**/**.{js,jsx}\"",
"prettier": "prettier --list-different \"./**/**.{js,jsx}\"",
"pretest": "npm run lint && npm run inspect && npm run prettier",
"test": "jest --coverage --runInBand"
Expand Down
Loading

0 comments on commit d93cbea

Please sign in to comment.