CODEWITHSUNDEEP
visual-studiovisual-studio-2017syntax-highlighting
André Ricardo Pontes
André Ricardo Pontes

Reputation: 81

How Visual Studio syntax highlight works?

When I create a tag 'style' in an aspx page, Visual Studio highligths code using css style syntax to highlights and formatting. When I create a tag 'script', Visual Studio does the same, but using javascript style syntax.

When I create a .scss file, Visual Studio has scss syntax. I created a new server control that processes SCSS, and I want that code wrote inside this server control use scss style syntax. How do I vinculate a certain tag to a certain syntax processor?

Ps.: I'm using Visual Studio 2017

Upvotes: 1

Views: 769

Answers (1)

Jimmy
Jimmy

Reputation: 28376

Editors (and many editor related features) in VS rely on a Content Type which indicates the language they support. Most editors, like C# or VB, only work on a single Content Type.

The HTML and ASPX editors in Visual Studio (which are separate editors) identify certain patterns that indicate a different language is being used. It then creates multiple internal documents in memory (TextBuffers) with separate Content Types for each language identified. The language services for each of those can then be used to handle the language natively instead of HTML having to "know" all about CSS/JavaScript/anything else. For example:

  • <script> blocks or event handlers create a JavaScript buffer for the contents
  • <style> blocks or style= attributes create CSS buffers
  • Any of the <%-style ASP.NET nuggets create appropriate language buffers (C#/VB)
  • The @ in Razor CSHTML files creates a C# buffer
  • etc

These nested TextBuffers are actually entire documents to make the language look right. For example, if I have:

<span style="color: blue;" />

The CSS buffer is an internal document that looks something like this:

/* BEGIN EXTERNAL SOURCE */
span {
color: blue;
}
/* END EXTERNAL SOURCE */

It's important to note that this is a complete and parseable CSS document, so the language service can work as normal for finding errors, giving IntelliSense, etc.

(And if you think the CSS buffer looks messy, you should see what happens for Razor or ASPX nuggets...)

The ASPX editor then uses the VS editor platform to coordinate projections between these buffers into the single view of what you see - a TextView. So it looks like a single document, but it's being handled internally as several different documents (TextBuffers), one per language.

Now, getting to your question: how can you make the ASPX editor support SCSS? Well, there are two parts to this:

First, the ASPX editor would need to know how to identify the SCSS region of the document. This might be <style type="text/scss"> or another indicator. This could even be done by writing an extension to the ASPX editor if it were extensible (the HTML editor is much more friendly to writing extensions).

Next, the ASPX editor would create the projection span. It would hand that off to the SCSS language service. The SCSS language service needs to know that it's in a projection, and generate all that extra stuff to make the syntax tree work. (Note: the SCSS language service in VS doesn't support this today.)

From then on, everything that happens in the SCSS region needs to be mapped between the TextView (where the cursor is in the document you see) to the SCSS-specific TextBuffer (where the cursor is in the in-memory document used by the language service). Again, today the SCSS LS does not take this scenario into account.

The best way to get this to be supported is to give feedback through the Visual Studio developer community. This feature is already on the backlog, but adding additional votes for it will help the team to prioritize the work.

Upvotes: 1

Related Questions