mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 14:46:38 +02:00
Code Issues Releases Wiki Activity

Use Prism

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-28 19:55:16 +07:00
parent 58b1c76d45
commit 09151bb8c4
3 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.babelrc
View File

@@ -1,5 +1,12 @@
{ {
"plugins": ["@loadable/babel-plugin"], "plugins": [
"@loadable/babel-plugin",
["prismjs", {
"languages": ["css", "html", "javascript", "jsx", "tsx"],
"theme": "twilight",
"css": true
}]
],
"presets": [ "presets": [
"@babel/preset-env", "@babel/preset-env",
"@babel/preset-react" "@babel/preset-react"

13
client/helpers/highlight.ts
View File

@@ -3,19 +3,14 @@
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc> * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/ */
import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line import Prism from 'prismjs';
import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('html', html);
const highlight = (input: string, language: string) => { const highlight = (input: string, language: string) => {
const lang = language || 'html'; const lang = language || 'html';
const { value } = hljs.highlight(lang, input); const value = Prism.highlight(input, Prism.languages[language], language);
const highlighted = value.replace('&amp;', '&').trim(); const highlighted = value.replace('&amp;', '&').trim();
return `<code class="${lang}">${highlighted}</code>`; return `<code class="language-${lang}">${highlighted}</code>`;
}; };
export default highlight; export default highlight;

3
package.json
View File

@@ -13,6 +13,7 @@
"dependencies": { "dependencies": {
"@loadable/component": "^5.14.1", "@loadable/component": "^5.14.1",
"highlight.js": "^10.7.1", "highlight.js": "^10.7.1",
"prismjs": "^1.23.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
@@ -24,11 +25,13 @@
"@babel/preset-react": "^7.13.13", "@babel/preset-react": "^7.13.13",
"@loadable/babel-plugin": "^5.13.2", "@loadable/babel-plugin": "^5.13.2",
"@types/loadable__component": "^5.13.3", "@types/loadable__component": "^5.13.3",
"@types/prismjs": "^1.16.4",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3", "@types/react-dom": "^17.0.3",
"@types/react-helmet": "^6.1.0", "@types/react-helmet": "^6.1.0",
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"babel-plugin-prismjs": "^2.0.1",
"cpx2": "^3.0.0", "cpx2": "^3.0.0",
"css-loader": "^5.2.0", "css-loader": "^5.2.0",
"html-webpack-plugin": "^5.3.1", "html-webpack-plugin": "^5.3.1",