When adding source blocks in a org-mode document (usually with the shortcut <s TAB), it usually works fine, but specifically with web-mode, if I edit any snippet with the special editor (C-c-'), it also works fine, but once I close emacs and reopen it again, the syntax highlight of "embedded" web-mode source snippets doesn't work correctly.

It seems that just after editing the source code with the special editor, the syntax highlight is correctly copied to the org file, but once I re-edit directly the snippet or I restart emacs it only highlights the javascript parts.

In my case, this piece of code:

  <!doctype html>
    <div id="root"></div>
    <script type="text/javascript">
     const element = document.getElementById('root')

only has highlighted const, element and getElementById. Everything else is just white (even root has also lost his highlighting).

Of course, I have org-src-fontify-natively set.

Is there any solution to this?

PD: If it is worth to note, I'm using the purcell's emacs configuration. The only personal configuration added by me that has something to do with org-mode or web-mode is:

(require 'web-mode)

(defun my-web-mode-hook ()
  "Web mode personalization."
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-indent-style 2)
  (setq web-mode-comment-style 2)
  (setq web-mode-style-padding 1)
  (setq web-mode-script-padding 1)
  (setq web-mode-block-padding 0)

  (setq web-mode-enable-css-colorization t)
  (setq web-mode-enable-current-element-highlight t)
  (setq web-mode-enable-current-column-highlight t)

  (setq web-mode-enable-auto-pairing t)
  (setq web-mode-enable-auto-closing t)
  (setq web-mode-enable-auto-expanding t)
  (setq web-mode-enable-auto-quoting t)

  (setq web-mode-enable-engine-detection t)

  (if (equal web-mode-content-type "javascript")
      (web-mode-set-content-type "jsx")
    (message "now set to: %s" web-mode-content-type)))

(add-hook 'web-mode-hook 'my-web-mode-hook)
(setq org-src-fontify-natively t)

But I don't think my configuration has something to do with the problem because the special editor works perfectly as I said.

PD2: web-mode's auto-indentation or other features doesn't work either unless I open the special editor, but that's fine to me. I only need the highlighting works as expected.

  • use html in the header and not web – manandearth Jun 5 '18 at 4:20
  • Then the javascript blocks are not fontified, and want to use the web-mode on the special editor, altough I know that that can be customized; but anyway, I want to have the javascript blocks fontified as well. – Peregring-lk Jun 5 '18 at 21:55

Your Answer

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

Browse other questions tagged or ask your own question.