add feature to allow specifying language on import snippet markdown h…

[fabioaanthony]

Summary

This PR allows you to add a flag for specifying a language when using import code snippet feature. (https://vuepress.vuejs.org/guide/markdown.html#import-code-snippets)

This feature allows you to specify a language which ensures you get the proper syntax highlighting you need via prism. To specify a language, simply add lang=<language-name>. I ensured it is 100% backwards compatible and is flexible so ordering of lineHighlight and lang flag is irrelevant. Lang flag is also optional. Here's some examples:

<<< @/docs/code/example.js
<<< @/docs/code/example.rb {1-7} lang=ruby
<<< @/docs/code/example.cpp lang=cpp {2-34}
<<< @/docs/code/example.erb{2,4-16} lang=html
<<< @/docs/code/example.py{2,4,6}

I updated and added the proper tests too.

If it looks good, let me know and I'll update the documentation too.

@ulivz @yyx990803

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[fabioaanthony]

Heads up! I reverted back to original for-loop syntax in 8f2a60e with added language support feature because it was otherwise causing an issue in my local Vuepress project. If you can share why this code works:

for (let i = 0; i < 3; ++i) {
  const ch = state.src.charCodeAt(pos + i)
  if (ch !== CH || pos + i >= max) return false
}

and this code does not:

if (!/^<<</.test(state.src)) {
  return false
}

Seems to be related with how markdown-it processes code blocks which is why the for-loop works and the test#fn does not...

[ulivz]

Thanks for the work, but this is still a feature that deserves further consideration and discussion.

I recommend you to create an RFC since it introduces substantial changes.

Ref: #538

//cc @znck

[znck]

If we’re revisiting this, we should consider syntax suggested by Pine. #538 (comment)

[fabioaanthony]

@znck that’s interesting for sure. I particularly like the idea of partial inclusion. So where do you guys land on this? What’s the process here? RFC? I’ll make the commit and revise the docs once I get the green light and everyone settles on a format.

[fabioaanthony]

Decided to just make a new PR after reading through previous comments and discussions. Please see #1336