Sublime Forum

[SOLVED] Changing the background for a code block that already has sublime-syntax applied


Long time lurker, first time poster :grinning:

I take notes using Sublime and while I have a custom sublime-syntax and sublime-color-scheme file to apply all the formatting I want, I’m stuck at this one complicated scenario involving code blocks.

Here’s what I have so far…

I used a push inside a match¹ to apply JavaScript syntax highlighting to this code block (everything between << and >>, the opening angled braces are styled differently on purpose; just playing around with the style.)

My problem:
I want to apply a dark background just for this code block. I can change the colors and styles for the keyword tokens inside the code using scopes but I can’t target just the background color for the code block alone, like so…
(sorry, new users can’t upload more than 1 image in post so that’s an external link to a mockup of what I’m aiming for.)

¹The relevant bit of sublime-syntax:

    - match: (<<)
        1: post.code.start
      push: Packages/JavaScript/JavaScript.sublime-syntax
        - match: (?=>>)
          pop: true
    - match: ">>"
      scope: post.code.end

The relevant bit of sublime-color-scheme:

  "scope": "post.code.start",
  "foreground": "var(gray1)",
  "background": "var(gray5)",
  "scope": "post.code.end",
  "foreground": "var(gray1)",
  "background": "#FFFFFF",

Is it possible to apply a dark color scheme just to this code block?

If not, what are my other options to change the background?

I can change the colors for the keywords albeit by tediously mapping JavaScript-related scopes to dark-themed colors in my color-scheme file, but I can’t even do that with the bg, nothing works there.



What if

- match: "<<"
  scope: post.code.start
  embed: Packages/JavaScript/JavaScript.sublime-syntax
  embed_scope: meta.code-block
  escape: (?=>>)
- match: ">>"
  scope: post.code.end

and assign a bg color to meta.code-block?

1 Like


Yes, that works! Thank you :pray:

Could you give some detail on what you are doing with this new syntax and how it’s different from my approach? (which was a shameless copy-pasta from Sublime docs :grinning:)



  • embed / escape is basically doing the same job with with_prototype / pop. But iirc, embed will not compile the included file (or scope) into the generated cache so the compiled syntax cache will be smaller and it’s preferred.
  • embed_scope gives the embedded part an extra scope which in your case, using it to color the background. The doc says meta_content_scope is doing a similar job but I didn’t test it since embed_scope looks more consistent.
1 Like


Thanks for clearing that up, I think I’ll get a lot of use out of embed_scope :grinning:

Is there a way to mark this thread as [SOLVED] or should I manually edit the title?

update: nvm, cheers :+1:



I am sure the [SOLVED] is not manually added but I hardly ask questions these days here so I do know about how to do that :stuck_out_tongue:

1 Like


You may want to add a language identifier to code block just like markdown.
>> and << are bit-shifting operator in most languages by the way.

// some js codes

# some python codes


If this was posted in the Technical Support category, you could select a post as the “solution” and the thread would get marked as solved through that.

This feature should probably be added to some more categories because I can totally see this making sense for Plugin Development.