diff --git a/assets/styles/highlightjs.scss b/assets/styles/highlightjs.scss
index ab928481e..da6b877cc 100644
--- a/assets/styles/highlightjs.scss
+++ b/assets/styles/highlightjs.scss
@@ -1,7 +1,7 @@
 .hljs {
   display: block;
   overflow-x: auto;
-  padding: 0.5em;
+  padding: 0.5rem !important;
   background: #F0F0F0
 }
 
@@ -92,4 +92,4 @@ pre {
     word-break: normal;
     font-family: monospace;
   }
-}
+}
\ No newline at end of file
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
index 49a9902e8..e52cc97ea 100644
--- a/pages/mod/_id/index.vue
+++ b/pages/mod/_id/index.vue
@@ -5,7 +5,7 @@
     :members="members"
     :current-member="currentMember"
   >
-    <div v-compiled-markdown="body" class="markdown-body"></div>
+    <div v-compiled-markdown="body" v-highlightjs class="markdown-body"></div>
   </ModPage>
 </template>
 
diff --git a/plugins/vue-syntax.js b/plugins/vue-syntax.js
index dcf398090..c6b09a896 100644
--- a/plugins/vue-syntax.js
+++ b/plugins/vue-syntax.js
@@ -1,11 +1,57 @@
 import Vue from 'vue'
-import hljs from 'highlight.js'
+import hljs from 'highlight.js/lib/core'
+// Scripting
+import javascript from 'highlight.js/lib/languages/javascript'
+import python from 'highlight.js/lib/languages/python'
+import lua from 'highlight.js/lib/languages/lua'
+// Coding
+import java from 'highlight.js/lib/languages/java'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import scala from 'highlight.js/lib/languages/scala'
+import groovy from 'highlight.js/lib/languages/groovy'
+// Configs
+import gradle from 'highlight.js/lib/languages/gradle'
+import json from 'highlight.js/lib/languages/json'
+import ini from 'highlight.js/lib/languages/ini'
+import yaml from 'highlight.js/lib/languages/yaml'
+import xml from 'highlight.js/lib/languages/xml'
+import properties from 'highlight.js/lib/languages/properties'
+
+/* REGISTRATION */
+// Scripting
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('lua', lua)
+// Coding
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('kotlin', kotlin)
+hljs.registerLanguage('scala', scala)
+hljs.registerLanguage('groovy', groovy)
+// Configs
+hljs.registerLanguage('gradle', gradle)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('ini', ini)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('properties', properties)
+
+/* ALIASES */
+// Scripting
+hljs.registerAliases(['js'], 'javascript')
+hljs.registerAliases(['py'], 'python')
+// Coding
+hljs.registerAliases(['kt'], 'kotlin')
+// Configs
+hljs.registerAliases(['json5'], 'json')
+hljs.registerAliases(['toml'], 'ini')
+hljs.registerAliases(['yml'], 'yaml')
+hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], 'xml')
 
 Vue.directive('highlightjs', {
   deep: true,
   bind(el, binding) {
     // on first bind, highlight all targets
-    const targets = el.querySelectorAll('code')
+    const targets = el.querySelectorAll('pre > code')
     targets.forEach((target) => {
       // if a value is directly assigned to the directive, use this
       // instead of the element content.
@@ -17,7 +63,7 @@ Vue.directive('highlightjs', {
   },
   componentUpdated(el, binding) {
     // after an update, re-fill the content and then highlight
-    const targets = el.querySelectorAll('code')
+    const targets = el.querySelectorAll('pre > code')
     targets.forEach((target) => {
       if (binding.value) {
         target.textContent = binding.value