Sublime Forum

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

#1

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: (<<)
      captures:
        1: post.code.start
      push: Packages/JavaScript/JavaScript.sublime-syntax
      with_prototype:
        - 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.

0 Likes

#2

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

#3

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:)

0 Likes

#4

https://www.sublimetext.com/docs/3/syntax.html#match_patterns

  • 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

#5

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:

0 Likes

#6

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

#7

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.

<<javascript
// some js codes
>>

<<python
# some python codes
>>
0 Likes

#8

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.

0 Likes