PackageDetail: file browser: add syntax highlighting

dmstern · Nov 3, 2018 · d9230fa · d9230fa
1 parent cf2d3d1
commit d9230fa
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
@@ -80,6 +80,7 @@ export default class CodeBlock extends Vue {
     flex-grow: 1;
     align-self: flex-end;
     max-width: calc(100% - 52px);
+    min-height: 4em;
   }
 }
 

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -104,6 +104,7 @@
                     class="file-content transition"
                     :class="(data.activeTreeItem.name && !isLoadingCode)? 'visible' : 'hidden'"
                     :key="data.activeTreeItem.id"
+                    :language="getLanguage(data.activeTreeItem.name)"
                   ></CodeBlock>
                 </div>
               </v-card-text>
@@ -582,6 +583,33 @@ export default class PackageDetail extends Vue {
     return extensionIcon || icons.file;
   }
 
+  private getLanguage(filename: string): string {
+    const languages = {
+      js: 'javascript',
+      ts: 'typescript',
+      jsx: 'javascript',
+      md: 'markdown',
+      css: 'css',
+      html: 'html',
+      htm: 'html',
+      scss: 'scss',
+      hbs: 'handlebars',
+      xml: 'xml',
+      json: 'json',
+      svg: 'svg',
+      ftl: 'xml',
+      sh: 'bash',
+    }
+    const parts = filename.split('.');
+    if (parts.length > 0) {
+      const extension = parts[parts.length - 1];
+      if (languages[extension]) {
+        return languages[extension];
+      }
+    }
+    return 'javascript';
+  }
+
   private isOld(): boolean | undefined {
     if (!this.data.packageDetail || !this.data.currentPackage) {
       return false;