Fix different language highlight + add option to skip highlighting + don't highlight markdown code

Author: AydinHassan

assets/components/Website/Docs/CodeBlock.vue

@@ -10,12 +10,27 @@ import { highlightCode } from "../../../helpers/highlightCode";
 import { TransitionRoot } from "@headlessui/vue";
 import { ClipboardDocumentIcon } from "@heroicons/vue/24/solid";
 
-const language = ref("php");
 const formattedCode = ref("");
 const code = ref(slots.default()[0].children);
 
+const props = defineProps({
+  lang: {
+    type: String,
+    default: "php",
+  },
+  noHighlight: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const highlight = () => {
-  formattedCode.value = highlightCode(code.value, language.value);
+  if (props.noHighlight === true) {
+    formattedCode.value = code.value;
+    return;
+  }
+
+  formattedCode.value = highlightCode(code.value, props.lang);
 };
 
 onMounted(() => {
@@ -66,7 +81,7 @@ const clipboardAvailable = computed(() => {
       <span class="absolute right-4 top-4 font-mono text-[10px] text-pink-600">Copied!</span>
     </TransitionRoot>
     <div class="mb-4 overflow-y-scroll rounded-md border border-gray-600 bg-gray-900 p-4">
-      <pre><code class="block  text-xs " :class="language" v-html="formattedCode"></code></pre>
+      <pre><code class="block text-xs" :class="lang" v-html="formattedCode"></code></pre>
     </div>
   </div>
 </template>

assets/components/Website/Docs/Sections/Tutorial/CreatingAnExercise.vue

@@ -64,7 +64,7 @@ echo $count / $numberCount;</pre
   </ul>
 
   <p>Our problem file might look like the following.</p>
-  <CodeBlock lang="md">
+  <CodeBlock lang="md" no-highlight>
     <pre>
 Write a program that accepts one or more numbers as command-line arguments and prints the mean average of those numbers to the console (stdout).