4
4
:class =" tw`px-1 py-2 bg-gray-100 dark:bg-gray-800 overflow-auto`"
5
5
>
6
6
<Prism :language =" lang === 'vue' ? 'html' : lang" :inline =" inline" >{{
7
- prettyCode
7
+ formattedCode
8
8
}}</Prism >
9
9
</div >
10
10
</template >
@@ -15,6 +15,7 @@ import { tw } from "twind";
15
15
import Strip from " strip-indent" ;
16
16
import PrismJs from " prismjs" ;
17
17
import " prismjs/components/prism-json" ;
18
+ import " prismjs/components/prism-bash" ;
18
19
import " prismjs/plugins/line-numbers/prism-line-numbers.js" ;
19
20
import Prism from " vue-prism-component" ;
20
21
import { format } from " prettier/standalone" ;
@@ -34,7 +35,8 @@ export default defineComponent({
34
35
lang: {
35
36
type: String ,
36
37
default: " html" ,
37
- validator : (v : string ) => [" js" , " vue" , " json" , " html" ].includes (v ),
38
+ validator : (v : string ) =>
39
+ [" js" , " vue" , " json" , " html" , " bash" ].includes (v ),
38
40
},
39
41
inline: {
40
42
type: Boolean ,
@@ -61,14 +63,16 @@ export default defineComponent({
61
63
plugins: [prettierPluginPackage ],
62
64
},
63
65
};
64
- const prettierConfig = prettierConfigs ?.[props ?.lang ];
65
- const prettyCode = computed (() =>
66
- format (Strip (props .code ), prettierConfig )
66
+ const prettierConfig = prettierConfigs ?.[props .lang ] ?? false ;
67
+ const formattedCode = computed (() =>
68
+ prettierConfig
69
+ ? format (Strip (props .code ), prettierConfig )
70
+ : Strip (props .code )
67
71
);
68
72
onMounted (() => {
69
73
PrismJs .highlightAll ();
70
74
});
71
- return { prettyCode , tw };
75
+ return { formattedCode , tw };
72
76
},
73
77
});
74
78
</script >
0 commit comments