3 files changed, 64 insertions, 1 deletions
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index d3c13ad..a4d1d28 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -6,6 +6,9 @@ import Main from '@components/Main/Main';
 import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
 import { t } from '@lingui/macro';
 import 'prism-themes/themes/prism-coldark-cold.min.css';
+import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
+import { useRouter } from 'next/router';
+import { config } from '@config/website';
 
 const Layout = ({
   children,
@@ -14,9 +17,17 @@ const Layout = ({
   children: ReactNode;
   isHome?: boolean;
 }) => {
+  const router = useRouter();
+  const locale = router.locale ? router.locale : config.defaultLocale;
+
   useEffect(() => {
+    addPrismClasses();
     Prism.highlightAll();
-  }, []);
+  });
+
+  useEffect(() => {
+    translateCopyButton(locale);
+  }, [locale]);
 
   return (
     <>
diff --git a/src/config/website.ts b/src/config/website.ts
index 717b616..a1e238e 100644
--- a/src/config/website.ts
+++ b/src/config/website.ts
@@ -7,5 +7,6 @@ export const config = {
     startYear: '2012',
     endYear: new Date().getFullYear(),
   },
+  defaultLocale: 'fr',
   postsPerPage: 10,
 };
diff --git a/src/utils/helpers/prism.ts b/src/utils/helpers/prism.ts
new file mode 100644
index 0000000..86c8f7d
--- /dev/null
+++ b/src/utils/helpers/prism.ts
@@ -0,0 +1,51 @@
+import { t } from '@lingui/macro';
+
+/**
+ * Check if the current block has a defined language.
+ * @param classList - A list of class.
+ * @returns {boolean} - True if a class starts with "language-".
+ */
+const isLanguageBlock = (classList: DOMTokenList) => {
+  const classes = Array.from(classList);
+  return classes.some((className) => /language-.*/.test(className));
+};
+
+/**
+ * Add automatically some classes and attributes for PrismJs.
+ *
+ * These classes and attributes are needed by Prism or to customize comments.
+ */
+export const addPrismClasses = () => {
+  const preTags = document.getElementsByTagName('pre');
+
+  Array.from(preTags).forEach((preTag) => {
+    if (
+      isLanguageBlock(preTag.classList) &&
+      !preTag.classList.contains('command-line') &&
+      !preTag.classList.contains('language-diff')
+    ) {
+      preTag.classList.add('line-numbers', 'match-braces');
+    }
+
+    if (
+      preTag.classList.contains('command-line') &&
+      preTag.classList.contains('filter-output')
+    ) {
+      preTag.setAttribute('data-filter-output', '#output#');
+    }
+  });
+};
+
+/**
+ * Translate the PrismJS Copy to clipboard button.
+ */
+export const translateCopyButton = (locale: string) => {
+  const articles = document.getElementsByTagName('article');
+
+  Array.from(articles).forEach((article) => {
+    article.setAttribute('lang', locale);
+    article.setAttribute('data-prismjs-copy', t`Copy`);
+    article.setAttribute('data-prismjs-copy-success', t`Copied!`);
+    article.setAttribute('data-prismjs-copy-error', t`Use Ctrl+c to copy`);
+  });
+};