CSS syntax highlighting in Visual Studio 2015 does not function properly when used within vbhtml razor pages

When editing my vbhtml pages, I've noticed that everything syntax-highlights properly except for the CSS enclosed in the <style>...</style> block. Inline CSS like <td style="color:yellow"... still highlights correctly, but not the CSS inside the <style>...</style> block.

Is there a special trick or setting in VS2015 that I need to enable in order to get proper CSS highlighting within the <style>...</style> block?

Answer №1

After some research, I discovered the solution to my own query. It seems that when Razor syntax is used within the <style>...</style> tags, the syntax highlighting feature stops working. An example of this can be seen below:

<style>
    .foo{
        background-image:url(@Url.Content("~/")Content/Images/shell/home_16.jpg);
    }
</style>

To remedy this issue, it is recommended to place classes containing Razor syntax in a separate <style>...</style> block.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display only the spans that contain text or are not empty

I need a solution to hide only those spans that are empty. <div class="img-wrapper"> <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This one has caption</span> </div> ...

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

Padding causing links to break exclusively in Firefox

As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space. The problem seems to be in this piece of code: HTML: <div id="h ...

Arranging DIV elements into rows and columns within a table

After working all night to fix a problem, my goal is to create this timetable: https://i.sstatic.net/dAt1J.png Specifically, I'm struggling to find a solution for rows 5, 6, and 7 in the first column. The image is from a program that only runs in IE ...

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

Modify the color of the downward arrow within a dropdown menu

I'm currently working with ngx paginator and I need to customize the CSS styles to appear in white color. Here is the code I've tried: HTML <div class="paginator__footer-select col col-md-3 offset-md-1 "> & ...

What could be causing the Material AngularJS (CSS) on my website to not function properly, unlike the demo that was

I am completely new to AngularJS and I want to incorporate the material design version of AngularJS for developing a form. I followed the beginner's guide and attempted to create something, but it didn't turn out like the one on the website. So, ...

Hiding HTML Labels with Jquery

I have a label that I want to hide initially and then display with the resultant values when the Submit event of the dialog box occurs. The label should not be visible at first, which is correct. However, even after clicking the submit button, it is not sh ...

What is the best way to align the navbar items in the center?

Is there a way to center the navigation bar elements using Bootstrap? HTML <body> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div> <ul class="nav navbar-nav"> ...

including extra information beside a <ul> unordered list

I have a list of product specifications that I need to display in a spec sheet format. Here is the code I have so far: <div class="productspec"> <ul> <li>Product Description</li> <li>Device Type</li> <li>Bundled ...

The mobile menu is not responding to the click event

Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered. Even though I can confirm that my javascrip ...

How can you gradually make a CSS border disappear?

Can an element's border fade away with the use of JavaScript only, without relying on jQuery for animation? We are currently working with Sencha and it seems that ExtJS only allows for animating element size and position. While CSS3 offers helpful ani ...

Collapsed Bootstrap navigation bar on mobile devices

Hello everyone, I am currently using the latest version of Bootstrap for my website. However, I have encountered an issue where the navigation collapses on mobile view. Could anyone provide assistance? Website: Below is a snippet of my HTML code: <he ...

I'm looking to replicate the header design of the classic olx website. Is there anyone who can guide me on how to extend the search bar to match the original image?

Could use some help stretching my search input field to match the original picture. Any tips or suggestions on how to achieve this? I'm utilizing bootstrap and react.js for this project. Uploaded are the original image and my resulting image for compa ...

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...

ReactAwesome Slider Autoplay Feature

I've been tinkering with a React Awesome Slider that you can find here: https://github.com/rcaferati/react-awesome-slider I've managed to implement it successfully, but I'm struggling to make it autoplay every 10 seconds. I assume I need to ...

Toggle the visibility of a div using JavaScript depending on the data value

I have a collection of images displayed in div tags with data attributes. My goal is to toggle their visibility using CSS based on a match with input text. I iterate through the divs with the matching class, then loop through the words in the input array, ...

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...