web-mode not working inside of org-mode src block

Question

I am trying to write code snippets inside org-mode and I am not able to get the same effect from web-mode.

If I write the code in a css file completely I get this:

But when I write the same code inside of org-mode and put the major mode as web, I get the following:

How can I fix this such that I get the same properties of web-mode inside of org-mode as well?

Answer 1

Use either css mode:

#+BEGIN_SRC css
.inputField {
   color: #525252;
}
#+END_SRC

and add color fontification by using code found here,

or inline the css in web:

#+BEGIN_SRC web
<style>
.inputField {
   color: #525252;
}
</style>
#+END_SRC

EDIT after comment from @predicate and @Dan:

Ok, I see. The problem is, that web-mode detects css based on file extension, which does not work for source blocks. As a workaround you could define a minimal helper mode for each language you use. You would have to call web-mode to initialize web mode and then change the type by setting buffer local variable web-mode-content-type to "css", "javascript", "json" or "jsx".

Here an example for a web-css-mode:

(define-derived-mode web-css-mode web-mode "WebCss"
  "Major mode for editing web css templates."
  (web-mode)
  (setq web-mode-content-type "css"))

And its usage in org-mode:

#+BEGIN_SRC web-css
.inputField {
   color: #525252;
   color: #dfdfdf;
   color: #FFCC02;
   color: #FFE477;
}
#+END_SRC

Bonus:

Did not try it, but you might also be able to define another engine by inserting

/* -*- engine:php -*- */

(replacing php with the engine you want, see variable web-mode-engines or topic "Associate an engine" here) in your buffer.