Added code syntax highlighting

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
-data/
+data/*
+!data/**/*.json

.prettierignore

@@ -1,2 +1,3 @@
 *.css
+client/**/data/**/*.json
 CHANGELOG.md

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",

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",

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 (
-    <div className='mb-3'>
+    <pre>
-      <textarea
+      <code
-        className='form-control'
+        className={`language-${syntax.toLowerCase()}`}
-        id='code'
+        style={{ whiteSpace: 'pre-wrap', borderRadius: '4px' }}
-        rows={16}
+      >
-        value={props.code}
+        {code}
-        disabled
+      </code>
-      ></textarea>
+    </pre>
-    </div>
   );
 };

client/src/containers/Snippet.tsx

@@ -31,7 +31,10 @@ export const Snippet = (): JSX.Element => {
           <PageHeader title='' prevDest={from} />
           <div className='row mt-3'>
             <div className='col-12 col-md-7 col-lg-8'>
-              <SnippetCode code={currentSnippet.code} />
+              <SnippetCode
+                code={currentSnippet.code}
+                language={currentSnippet.language}
+              />
             </div>
             <div className='col-12 col-md-5 col-lg-4'>
               <SnippetDetails snippet={currentSnippet} />

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"]}

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"] }
+  ]
+}

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;
   }
 

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);
+};

client/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './dateParser';
 export * from './badgeColor';
+export * from './findLanguage';