Add extension to the snippet to help rendering with highlights

src/components/SnippetList.tsx

@@ -8,11 +8,6 @@ import { SnippetType } from "@types";
 import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";
 
-const extensions: { [key: string]: string } = {
- REACT: "tsx",
- FASTAPI: "py",
-};
-
 const SnippetList = () => {
  const { language, snippet, setSnippet } = useAppContext();
  const { fetchedSnippets } = useSnippets();
@@ -92,7 +87,7 @@ const SnippetList = () => {
  <SnippetModal
  snippet={snippet}
  handleCloseModal={handleCloseModal}
- language={extensions[language.name] || language.name}
+ language={snippet.extension}
  />
  )}
  </AnimatePresence>

src/types/index.ts

@@ -19,6 +19,7 @@ export type SnippetType = {
  code: string;
  tags: string[];
  author: string;
+ extension: string;
 };
 
 export type AppState = {

utils/snippetParser.js

@@ -55,6 +55,7 @@ function parseSnippet(path, name, text) {
  match = headerEndCodeStartRegex.exec(fromCursor());
  if(match === null) return raise('Missing header end \'---\' or code start \'```\'', path);
  cursor += match[0].length;
+ const extension = match[0].replace(/[\r\n`-]/g, '');
 
  match = codeRegex.exec(fromCursor());
  if(match === null) return raise('Missing code block end \'```\'', path);
@@ -67,6 +68,7 @@ function parseSnippet(path, name, text) {
  tags: properties.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag),
  contributors: 'contributors' in properties ? properties.contributors.split(',').map((contributor) => contributor.trim()).filter((contributor) => contributor) : [],
  code: code.replace(/\r\n/g, '\n'),
+ extension
  }
 }