Improve formatting of `${...}`

[kwalrath]

@mkustermann pointed out that code inside of ${...} is formatted like the rest of the string. It'd be good to format it like real code. E.g. in www.dartlang.org/articles/dart-vm/io#file-system-access, the print statement in the first code snippet looks something like this:

That await code (if outside of the string) would look like this:

This is probably a prettify issue, but it'd be really nice to fix it.

[smolck]

Maybe this could be fixed by adding some regex to src/_assets/js/vendor/code-prettify/lang-dart.js?

For example, this regex[1][2] matches things like $foo or ${<Dart code>}:

\$((\w+)|\{([^{}]+)\})

Could we add similar regex somewhere in lang-dart.js to detect string interpolation and highlight it like normal code?

[1]: Adapted from here: https://github.com/Dart-Code/Dart-Code/blob/06eaf66e9613b16e1401dd267c5597dff1524239/syntaxes/dart.json#L328.
[2]: I know almost zero regex, but it seems to work here: https://regexr.com/4m72j

[kwalrath]

I believe this would require a PR to https://github.com/google/code-prettify, but I could test the fix locally first.

@chalin how does this solution sound to you?

[chalin]

@smolck - the Dart Code reference is a good find!

@kwalrath - I agree that any updates should be submitted as a PR over https://github.com/google/code-prettify.

I see that googlearchive/code-prettify#592 hasn't been merged yet. Could we ping someone to ensure that progress is made?

Oh, we've already made local changes to vendor files -- e.g., #1624! Not what I prefer (since local changes like these run the risk of being overwritten), but it's good that I'm aware of it now.

• ⚠️ We probably should have also added a comment to the top of vendor/code-prettify/lang-dart.js to warn the reader/maintainer that the file contains a (hopefully temporary) patch.

[smolck]

@kwalrath @chalin Is submitting a PR to code-prettify for this (assuming it works) the route we want to go?

[kwalrath]

@kwalrath @chalin Is submitting a PR to code-prettify for this (assuming it works) the route we want to go?

I think we'd want PRs both here and at code-prettify.

[parlough]

It looks like Rouge does this a little better, so going to close this in favor of #3846.

The final though goal though is to move to a Dart analyzer based system as tracked in #4163.