From 0554b317556f4ce89d9615c675bfb327627f7af8 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 30 Sep 2021 15:57:03 +0200 Subject: [PATCH] Added code syntax highlighting --- .gitignore | 3 +- .prettierignore | 1 + client/package-lock.json | 5 + client/package.json | 1 + .../src/components/Snippets/SnippetCode.tsx | 31 +++- client/src/containers/Snippet.tsx | 5 +- client/src/data/aliases_raw.json | 1 + client/src/data/languages.json | 171 ++++++++++++++++++ client/src/utils/badgeColor.ts | 2 +- client/src/utils/findLanguage.ts | 6 + client/src/utils/index.ts | 1 + 11 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 client/src/data/aliases_raw.json create mode 100644 client/src/data/languages.json create mode 100644 client/src/utils/findLanguage.ts diff --git a/.gitignore b/.gitignore index 337e585..cd987da 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ build/ -data/ \ No newline at end of file +data/* +!data/**/*.json \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 12df85d..fe3f937 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ *.css +client/**/data/**/*.json CHANGELOG.md \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index c803181..7e460c6 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -7321,6 +7321,11 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "highlight.js": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.2.0.tgz", + "integrity": "sha512-JOySjtOEcyG8s4MLR2MNbLUyaXqUunmSnL2kdV/KuGJOmHZuAR5xC54Ko7goAXBWNhf09Vy3B+U7vR62UZ/0iw==" + }, "history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", diff --git a/client/package.json b/client/package.json index 55380c4..1bd7a16 100644 --- a/client/package.json +++ b/client/package.json @@ -14,6 +14,7 @@ "bootstrap": "^5.1.1", "clipboard-copy": "^4.0.1", "dayjs": "^1.10.7", + "highlight.js": "^11.2.0", "node-sass": "^6.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/client/src/components/Snippets/SnippetCode.tsx b/client/src/components/Snippets/SnippetCode.tsx index 04f58a4..574c1b7 100644 --- a/client/src/components/Snippets/SnippetCode.tsx +++ b/client/src/components/Snippets/SnippetCode.tsx @@ -1,17 +1,30 @@ +import { useEffect } from 'react'; +import { findLanguage } from '../../utils'; +import hljs from 'highlight.js'; +import 'highlight.js/styles/atom-one-dark.css'; + interface Props { code: string; + language: string; } export const SnippetCode = (props: Props): JSX.Element => { + const { code, language } = props; + + const syntax = findLanguage(language) ? language : 'plaintext'; + + useEffect(() => { + hljs.highlightAll(); + }, []); + return ( -
- -
+ 
+      
+        {code}
+      
+
); }; diff --git a/client/src/containers/Snippet.tsx b/client/src/containers/Snippet.tsx index 742cad0..99b9504 100644 --- a/client/src/containers/Snippet.tsx +++ b/client/src/containers/Snippet.tsx @@ -31,7 +31,10 @@ export const Snippet = (): JSX.Element => {
- +
diff --git a/client/src/data/aliases_raw.json b/client/src/data/aliases_raw.json new file mode 100644 index 0000000..db4f9ae --- /dev/null +++ b/client/src/data/aliases_raw.json @@ -0,0 +1 @@ +{"aliases":["1c","abnf","accesslog","actionscript","ada","adoc","angelscript","apache","apacheconf","applescript","arcade","arduino","arm","armasm","as","asc","asciidoc","aspectj","atom","autohotkey","autoit","avrasm","awk","axapta","bash","basic","bat","bf","bind","bnf","brainfuck","c","c++","cal","capnp","capnproto","cc","clj","clojure","cls","cmake.in","cmake","cmd","coffee","coffeescript","console","coq","cos","cpp","cr","craftcms","crm","crmsh","crystal","cs","csharp","cson","csp","css","cxx","d","dart","dfm","diff","django","dns","docker","dockerfile","dos","dpr","dsconfig","dst","dts","dust","ebnf","elixir","elm","erl","erlang","excel","f90","f95","fix","fortran","fs","fsharp","gams","gauss","gawk","gcode","gemspec","gherkin","glsl","gms","go","golang","golo","gololang","gradle","graph","groovy","gss","gyp","h","h++","haml","handlebars","haskell","haxe","hbs","hh","hpp","hs","html.handlebars","html.hbs","html","http","https","hx","hxx","hy","hylang","i7","iced","inform7","ini","ino","instances","irb","irpf90","java","javascript","jinja","js","json","jsp","jsx","julia-repl","julia","k","kdb","kotlin","kt","lasso","lassoscript","ldif","leaf","less","lisp","livecodeserver","livescript","ls","ls","lua","mak","make","makefile","markdown","mathematica","matlab","mawk","maxima","md","mel","mercury","mizar","mk","mkd","mkdown","ml","ml","mm","mma","mojolicious","monkey","moon","moonscript","n1ql","nawk","nc","nginx","nginxconf","nim","nimrod","nix","nsis","obj-c","obj-c++","objc","objective-c++","objectivec","ocaml","openscad","osascript","oxygene","p21","parser3","pas","pascal","patch","pcmk","perl","pf.conf","pf","pgsql","php","pl","plaintext","plist","pm","podspec","pony","postgres","postgresql","powershell","pp","processing","profile","prolog","properties","protobuf","ps","ps1","puppet","py","pycon","python-repl","python","qml","r","rb","re","reasonml","rib","rs","rsl","rss","ruby","ruleslanguage","rust","SAS","sas","scad","scala","scheme","sci","scilab","scss","sh","shell","smali","smalltalk","sml","sql","st","stan","stanfuncs","stata","step","stp","styl","stylus","subunit","svg","swift","tao","tap","tcl","tex","text","thor","thrift","tk","toml","tp","ts","twig","txt","typescript","v","vala","vb","vbnet","vbs","vbscript","verilog","vhdl","vim","wl","x++","x86asm","xhtml","xjb","xl","xls","xlsx","xml","xpath","xq","xquery","xsd","xsl","yaml","yml","zep","zephir","zone","zsh"]} \ No newline at end of file diff --git a/client/src/data/languages.json b/client/src/data/languages.json new file mode 100644 index 0000000..7b20d1c --- /dev/null +++ b/client/src/data/languages.json @@ -0,0 +1,171 @@ +{ + "languages": [ + { "name": "1C", "aliases": ["1c"] }, + { "name": "ABNF", "aliases": ["abnf"] }, + { "name": "Access logs", "aliases": ["accesslog"] }, + { "name": "Ada", "aliases": ["ada"] }, + { "name": "Arduino (C++ w/Arduino libs)", "aliases": ["arduino", "ino"] }, + { "name": "ARM assembler", "aliases": ["armasm", "arm"] }, + { "name": "AVR assembler", "aliases": ["avrasm"] }, + { "name": "ActionScript", "aliases": ["actionscript", "as"] }, + { "name": "AngelScript", "aliases": ["angelscript", "asc"] }, + { "name": "Apache", "aliases": ["apache", "apacheconf"] }, + { "name": "AppleScript", "aliases": ["applescript", "osascript"] }, + { "name": "Arcade", "aliases": ["arcade"] }, + { "name": "AsciiDoc", "aliases": ["asciidoc", "adoc"] }, + { "name": "AspectJ", "aliases": ["aspectj"] }, + { "name": "AutoHotkey", "aliases": ["autohotkey"] }, + { "name": "AutoIt", "aliases": ["autoit"] }, + { "name": "Awk", "aliases": ["awk", "mawk", "nawk", "gawk"] }, + { "name": "Bash", "aliases": ["bash", "sh", "zsh"] }, + { "name": "Basic", "aliases": ["basic"] }, + { "name": "BNF", "aliases": ["bnf"] }, + { "name": "Brainfuck", "aliases": ["brainfuck", "bf"] }, + { "name": "C#", "aliases": ["csharp", "cs"] }, + { "name": "C", "aliases": ["c", "h"] }, + { "name": "C++", "aliases": ["cpp", "hpp", "cc", "hh", "c++", "h++", "cxx", "hxx"] }, + { "name": "C/AL", "aliases": ["cal"] }, + { "name": "Cache Object Script", "aliases": ["cos", "cls"] }, + { "name": "CMake", "aliases": ["cmake", "cmake.in"] }, + { "name": "Coq", "aliases": ["coq"] }, + { "name": "CSP", "aliases": ["csp"] }, + { "name": "CSS", "aliases": ["css"] }, + { "name": "Cap’n Proto", "aliases": ["capnproto", "capnp"] }, + { "name": "Clojure", "aliases": ["clojure", "clj"] }, + { "name": "CoffeeScript", "aliases": ["coffeescript", "coffee", "cson", "iced"] }, + { "name": "Crmsh", "aliases": ["crmsh", "crm", "pcmk"] }, + { "name": "Crystal", "aliases": ["crystal", "cr"] }, + { "name": "D", "aliases": ["d"] }, + { "name": "Dart", "aliases": ["dart"] }, + { "name": "Delphi", "aliases": ["dpr", "dfm", "pas", "pascal"] }, + { "name": "Diff", "aliases": ["diff", "patch"] }, + { "name": "Django", "aliases": ["django", "jinja"] }, + { "name": "DNS Zone file", "aliases": ["dns", "zone", "bind"] }, + { "name": "Dockerfile", "aliases": ["dockerfile", "docker"] }, + { "name": "DOS", "aliases": ["dos", "bat", "cmd"] }, + { "name": "dsconfig", "aliases": ["dsconfig"] }, + { "name": "DTS (Device Tree)", "aliases": ["dts"] }, + { "name": "Dust", "aliases": ["dust", "dst"] }, + { "name": "EBNF", "aliases": ["ebnf"] }, + { "name": "Elixir", "aliases": ["elixir"] }, + { "name": "Elm", "aliases": ["elm"] }, + { "name": "Erlang", "aliases": ["erlang", "erl"] }, + { "name": "Excel", "aliases": ["excel", "xls", "xlsx"] }, + { "name": "F#", "aliases": ["fsharp", "fs"] }, + { "name": "FIX", "aliases": ["fix"] }, + { "name": "Fortran", "aliases": ["fortran", "f90", "f95"] }, + { "name": "G-Code", "aliases": ["gcode", "nc"] }, + { "name": "Gams", "aliases": ["gams", "gms"] }, + { "name": "GAUSS", "aliases": ["gauss", "gss"] }, + { "name": "Gherkin", "aliases": ["gherkin"] }, + { "name": "Go", "aliases": ["go", "golang"] }, + { "name": "Golo", "aliases": ["golo", "gololang"] }, + { "name": "Gradle", "aliases": ["gradle"] }, + { "name": "Groovy", "aliases": ["groovy"] }, + { "name": "HTML,XML", "aliases": ["xml", "html", "xhtml", "rss", "atom", "xjb", "xsd", "xsl", "plist", "svg"] }, + { "name": "HTTP", "aliases": ["http", "https"] }, + { "name": "Haml", "aliases": ["haml"] }, + { "name": "Handlebars", "aliases": ["handlebars", "hbs", "html.hbs", "html.handlebars"] }, + { "name": "Haskell", "aliases": ["haskell", "hs"] }, + { "name": "Haxe", "aliases": ["haxe", "hx"] }, + { "name": "Hy", "aliases": ["hy", "hylang"] }, + { "name": "Ini,TOML", "aliases": ["ini", "toml"] }, + { "name": "Inform7", "aliases": ["inform7", "i7"] }, + { "name": "IRPF90", "aliases": ["irpf90"] }, + { "name": "JSON", "aliases": ["json"] }, + { "name": "Java", "aliases": ["java", "jsp"] }, + { "name": "JavaScript", "aliases": ["javascript", "js", "jsx"] }, + { "name": "Julia", "aliases": ["julia", "julia-repl"] }, + { "name": "Kotlin", "aliases": ["kotlin", "kt"] }, + { "name": "LaTeX", "aliases": ["tex"] }, + { "name": "Leaf", "aliases": ["leaf"] }, + { "name": "Lasso", "aliases": ["lasso", "ls", "lassoscript"] }, + { "name": "Less", "aliases": ["less"] }, + { "name": "LDIF", "aliases": ["ldif"] }, + { "name": "Lisp", "aliases": ["lisp"] }, + { "name": "LiveCode Server", "aliases": ["livecodeserver"] }, + { "name": "LiveScript", "aliases": ["livescript", "ls"] }, + { "name": "Lua", "aliases": ["lua"] }, + { "name": "Makefile", "aliases": ["makefile", "mk", "mak", "make"] }, + { "name": "Markdown", "aliases": ["markdown", "md", "mkdown", "mkd"] }, + { "name": "Mathematica", "aliases": ["mathematica", "mma", "wl"] }, + { "name": "Matlab", "aliases": ["matlab"] }, + { "name": "Maxima", "aliases": ["maxima"] }, + { "name": "Maya Embedded Language", "aliases": ["mel"] }, + { "name": "Mercury", "aliases": ["mercury"] }, + { "name": "Mizar", "aliases": ["mizar"] }, + { "name": "Mojolicious", "aliases": ["mojolicious"] }, + { "name": "Monkey", "aliases": ["monkey"] }, + { "name": "Moonscript", "aliases": ["moonscript", "moon"] }, + { "name": "N1QL", "aliases": ["n1ql"] }, + { "name": "NSIS", "aliases": ["nsis"] }, + { "name": "Nginx", "aliases": ["nginx", "nginxconf"] }, + { "name": "Nim", "aliases": ["nim", "nimrod"] }, + { "name": "Nix", "aliases": ["nix"] }, + { "name": "OCaml", "aliases": ["ocaml", "ml"] }, + { "name": "Objective C", "aliases": ["objectivec", "mm", "objc", "obj-c", "obj-c++", "objective-c++"] }, + { "name": "OpenGL Shading Language", "aliases": ["glsl"] }, + { "name": "OpenSCAD", "aliases": ["openscad", "scad"] }, + { "name": "Oracle Rules Language", "aliases": ["ruleslanguage"] }, + { "name": "Oxygene", "aliases": ["oxygene"] }, + { "name": "PF", "aliases": ["pf", "pf.conf"] }, + { "name": "PHP", "aliases": ["php"] }, + { "name": "Parser3", "aliases": ["parser3"] }, + { "name": "Perl", "aliases": ["perl", "pl", "pm"] }, + { "name": "Plaintext", "aliases": ["plaintext", "txt", "text"] }, + { "name": "Pony", "aliases": ["pony"] }, + { "name": "PostgreSQL & PL/pgSQL", "aliases": ["pgsql", "postgres", "postgresql"] }, + { "name": "PowerShell", "aliases": ["powershell", "ps", "ps1"] }, + { "name": "Processing", "aliases": ["processing"] }, + { "name": "Prolog", "aliases": ["prolog"] }, + { "name": "Properties", "aliases": ["properties"] }, + { "name": "Protocol Buffers", "aliases": ["protobuf"] }, + { "name": "Puppet", "aliases": ["puppet", "pp"] }, + { "name": "Python", "aliases": ["python", "py", "gyp"] }, + { "name": "Python profiler results", "aliases": ["profile"] }, + { "name": "Python REPL", "aliases": ["python-repl", "pycon"] }, + { "name": "Q", "aliases": ["k", "kdb"] }, + { "name": "QML", "aliases": ["qml"] }, + { "name": "R", "aliases": ["r"] }, + { "name": "ReasonML", "aliases": ["reasonml", "re"] }, + { "name": "RenderMan RIB", "aliases": ["rib"] }, + { "name": "RenderMan RSL", "aliases": ["rsl"] }, + { "name": "Roboconf", "aliases": ["graph", "instances"] }, + { "name": "Ruby", "aliases": ["ruby", "rb", "gemspec", "podspec", "thor", "irb"] }, + { "name": "Rust", "aliases": ["rust", "rs"] }, + { "name": "SAS", "aliases": ["SAS", "sas"] }, + { "name": "SCSS", "aliases": ["scss"] }, + { "name": "SQL", "aliases": ["sql"] }, + { "name": "STEP Part 21", "aliases": ["p21", "step", "stp"] }, + { "name": "Scala", "aliases": ["scala"] }, + { "name": "Scheme", "aliases": ["scheme"] }, + { "name": "Scilab", "aliases": ["scilab", "sci"] }, + { "name": "Shell", "aliases": ["shell", "console"] }, + { "name": "Smali", "aliases": ["smali"] }, + { "name": "Smalltalk", "aliases": ["smalltalk", "st"] }, + { "name": "SML", "aliases": ["sml", "ml"] }, + { "name": "Stan", "aliases": ["stan", "stanfuncs"] }, + { "name": "Stata", "aliases": ["stata"] }, + { "name": "Stylus", "aliases": ["stylus", "styl"] }, + { "name": "SubUnit", "aliases": ["subunit"] }, + { "name": "Swift", "aliases": ["swift"] }, + { "name": "Tcl", "aliases": ["tcl", "tk"] }, + { "name": "Test Anything Protocol", "aliases": ["tap"] }, + { "name": "Thrift", "aliases": ["thrift"] }, + { "name": "TP", "aliases": ["tp"] }, + { "name": "Twig", "aliases": ["twig", "craftcms"] }, + { "name": "TypeScript", "aliases": ["typescript", "ts"] }, + { "name": "VB.Net", "aliases": ["vbnet", "vb"] }, + { "name": "VBScript", "aliases": ["vbscript", "vbs"] }, + { "name": "VHDL", "aliases": ["vhdl"] }, + { "name": "Vala", "aliases": ["vala"] }, + { "name": "Verilog", "aliases": ["verilog", "v"] }, + { "name": "Vim Script", "aliases": ["vim"] }, + { "name": "X++", "aliases": ["axapta", "x++"] }, + { "name": "x86 Assembly", "aliases": ["x86asm"] }, + { "name": "XL", "aliases": ["xl", "tao"] }, + { "name": "XQuery", "aliases": ["xquery", "xpath", "xq"] }, + { "name": "YAML", "aliases": ["yml", "yaml"] }, + { "name": "Zephir", "aliases": ["zephir", "zep"] } + ] +} \ No newline at end of file diff --git a/client/src/utils/badgeColor.ts b/client/src/utils/badgeColor.ts index 3d2b325..b1f5a52 100644 --- a/client/src/utils/badgeColor.ts +++ b/client/src/utils/badgeColor.ts @@ -22,7 +22,7 @@ export const badgeColor = (language: string): Color => { color = 'danger'; break; case 5: - color = 'dark'; + color = 'light'; break; } diff --git a/client/src/utils/findLanguage.ts b/client/src/utils/findLanguage.ts new file mode 100644 index 0000000..3a990d1 --- /dev/null +++ b/client/src/utils/findLanguage.ts @@ -0,0 +1,6 @@ +import { aliases } from '../data/aliases_raw.json'; + +export const findLanguage = (language: string): boolean => { + const search = language.toLowerCase(); + return aliases.some(alias => alias === search); +}; diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index 0c5d779..e76dd3b 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -1,2 +1,3 @@ export * from './dateParser'; export * from './badgeColor'; +export * from './findLanguage';