search

vuejs / vuepress

📝 Minimalistic Vue-powered static site generator
https://vuepress.vuejs.org
MIT License
22.53k stars 4.76k forks source link

Import Code Snippets: specify the language #1189

Open mbana opened 5 years ago

mbana commented 5 years ago

https://vuepress.vuejs.org/guide/markdown.html#import-code-snippets

I've got this block of code in Markdown file:

<<< @/docs/.vuepress/public/examples/circleci-authorizing-the-google-cloud-sdk_examples/.circleci/config.yml
...
<<< @/docs/.vuepress/public/examples/circleci-authorizing-the-google-cloud-sdk_examples/Makefile

Both work but the code is not highlighted. How do I specify the language when I import a code snippet?

qdot commented 5 years ago

I just had this same problem with a C# file. C# files usually end in .cs, if I do something like 

<<< @/example/Program.cs

What's rendered isn't highlighted. However, if you change the extension to the language name prism expects, i.e.

<<< @/example/Program.csharp

Then things worked for me. So, for now, you may have to name your files config.yaml and Makefile.makefile. That's... not great.

It looks like https://github.com/vuejs/vuepress/blob/d8e6ecc22205aeed4c770d3f6ef5758cccbecd75/packages/%40vuepress/markdown/lib/snippet.js#L34 is just popping the file extension as the language name (which is why you can get away with appending {x,y} and having line highlights work, since that'll just come along as part of the extension).