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?


Use either css mode:

.inputField {
   color: #525252;

and add color fontification by using code found here,

or inline the css in web:

.inputField {
   color: #525252;

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."
  (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;


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.

  • I use web-mode for writing a lot of different languages other than css, this solutions will work for only css. – predicate Jul 27 '16 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.