Skip to content

Handle code blocks that use > 3 backticks in syntax highlighting #10021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DanTup wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Handle code blocks that use > 3 backticks in syntax highlighting #10021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f3c558
Add code blocks with more than 3 backticks
DanTup Sep 24, 2026
8b15701
Handle backticks correctly
DanTup Sep 24, 2026
128f54e
Update NEXT_RELEASE_NOTES.md
DanTup Sep 24, 2026
ae86547
Address Gemini's comment
DanTup Sep 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions packages/devtools_app/assets/dart_syntax.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Dart",
"version": "1.6.0",
"version": "1.8.0",
"fileTypes": [
"dart"
],
Expand Down Expand Up @@ -76,12 +76,12 @@

"repository": {
"dartdoc-codeblock-triple": {
"begin": "^\\s*///\\s*(?!\\s*```)",
"begin": "^\\s*///\\s*",
"end": "$",
"contentName": "variable.other.source.dart"
},
"dartdoc-codeblock-block": {
"begin": "^\\s*\\*\\s*(?!(\\s*```|\/))",
"begin": "^\\s*\\*\\s*",
"end": "$",
"contentName": "variable.other.source.dart"
},
Expand All @@ -96,17 +96,17 @@
}
},
{
"begin": "^\\s*///\\s*(```)",
"end": "^\\s*///\\s*(```)|^(?!\\s*///)",
"begin": "^\\s*///\\s*(`{3,})",
"end": "^\\s*///\\s*(?=\\1)`*|^(?!\\s*///)",
"patterns": [
{
"include": "#dartdoc-codeblock-triple"
}
]
},
{
"begin": "^\\s*\\*\\s*(```)",
"end": "^\\s*\\*\\s*(```)|^(?=\\s*\\*\/)",
"begin": "^\\s*\\*\\s*(`{3,})",
"end": "^\\s*\\*\\s*(?=\\1)`*|^(?=\\s*\\*\/)",
"patterns": [
{
"include": "#dartdoc-codeblock-block"
Expand All @@ -118,7 +118,7 @@
"name": "variable.other.source.dart"
},
{
"match": "(?:\\*|\\/\\/)\\s{4,}(.*?)(?=($|\\*\\/))",
"match": "(?:\\*|\\/\\/)\\s{5,}(.*?)(?=($|\\*\\/))",
"captures": {
"1": {
"name": "variable.other.source.dart"
Expand Down
45 changes: 38 additions & 7 deletions packages/devtools_app/lib/src/screens/debugger/span_parser.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,10 +403,9 @@ class _MultilineMatcher extends GrammarMatcher {
Grammar grammar,
LineScanner scanner,
ScopeStack scopeStack,
RegExp resolvedEnd,
) {
while (!scanner.isDone &&
end != null &&
!scanner.matchesOnCurrentLine(end!)) {
while (!scanner.isDone && !scanner.matchesOnCurrentLine(resolvedEnd)) {
bool foundMatch = false;
for (final pattern in patterns ?? <GrammarMatcher>[]) {
if (pattern.scan(grammar, scanner, scopeStack)) {
Expand All @@ -421,14 +420,43 @@ class _MultilineMatcher extends GrammarMatcher {
}
}

void _scanEnd(Grammar grammar, LineScanner scanner, ScopeStack scopeStack) {
void _scanEnd(
Grammar grammar,
LineScanner scanner,
ScopeStack scopeStack,
RegExp resolvedEnd,
) {
final location = scanner.location;
if (end != null && !scanner.scanOnCurrentLine(end!)) {
if (!scanner.scanOnCurrentLine(resolvedEnd)) {
return;
}
_processCaptureHelper(grammar, scanner, scopeStack, endCaptures, location);
}

/// Returns an updated `end` regex that handles references in the form `\\1`
/// to reference matches from the `begin` regex.
///
/// For example, this allows matching the correct number of backticks to close
/// a code block as were used to open it.
RegExp _resolveEnd(Match beginMatch) {
final resolvedPattern = end!.pattern.replaceAllMapped(
RegExp(r'\\([0-9]+)'),
(match) {
final groupIndex = int.parse(match.group(1)!);
final capturedText = groupIndex <= beginMatch.groupCount
? beginMatch.group(groupIndex)
: null;
return capturedText == null
// No capture, keep the original text.
? match.group(0)!
// Otherwise, escape the referenced text in case it contains regex
// chars.
: RegExp.escape(capturedText);
},
);
return RegExp(resolvedPattern, multiLine: true);
}

void _processCaptureHelper(
Grammar grammar,
LineScanner scanner,
Expand Down Expand Up @@ -456,10 +484,13 @@ class _MultilineMatcher extends GrammarMatcher {
scopeStack.push(name, scanner.location);
_scanBegin(grammar, scanner, scopeStack);
if (end != null) {
// Resolve any references in the end regex that reference captures from
// the begin match.
final resolvedEnd = _resolveEnd(scanner.lastMatch!);
scopeStack.push(contentName, scanner.location);
_scanUpToEndMatch(grammar, scanner, scopeStack);
_scanUpToEndMatch(grammar, scanner, scopeStack, resolvedEnd);
scopeStack.pop(contentName, scanner.location);
_scanEnd(grammar, scanner, scopeStack);
_scanEnd(grammar, scanner, scopeStack, resolvedEnd);
} else if (whileCond != null) {
// Find the range of the string that is matched by the while condition.
final start = scanner.position;
Expand Down
3 changes: 3 additions & 0 deletions packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ To learn more about DevTools, check out the
narrow, such as when DevTools is embedded in an IDE side panel. The controls
now scroll horizontally instead of overflowing.
[#9949](https://github.com/flutter/devtools/pull/9949)
* Improved syntax highlighting of fenced code blocks that use more than three
backticks.
[#10021](https://github.com/flutter/devtools/pull/10021)

## Network profiler updates

Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/test/screens/debugger/span_parser_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ void main() {
// These goldens are updated using the usual Flutter --update-goldens
// flag:
//
// flutter test test/shared/span_parser_test.dart --update-goldens
// flutter test test/screens/debugger/span_parser_test.dart --update-goldens
final testFiles = testDataDirectory.listSync().whereType<File>().where(
(file) => path.extension(file.path) == '.dart',
);
Expand Down
56 changes: 56 additions & 0 deletions packages/devtools_app/test/test_infra/goldens/syntax_highlighting/comments.dart.golden
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,59 @@
>var h;
#^^^ storage.type.primitive.dart
# ^ punctuation.terminator.dart
>
>/// Multiline dartdoc comment with more than three backticks.
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart
>///
#^^^ comment.block.documentation.dart
>/// ``````
#^^^^^^^^^^ comment.block.documentation.dart
>/// code in six backticks
#^^^^ comment.block.documentation.dart
# ^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart variable.other.source.dart
>/// ```
#^^^^ comment.block.documentation.dart
# ^^^ comment.block.documentation.dart variable.other.source.dart
>/// three backticks is nested code
#^^^^ comment.block.documentation.dart
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart variable.other.source.dart
>/// ```
#^^^^ comment.block.documentation.dart
# ^^^ comment.block.documentation.dart variable.other.source.dart
>/// more code
#^^^^ comment.block.documentation.dart
# ^^^^^^^^^ comment.block.documentation.dart variable.other.source.dart
>/// ``````
#^^^^^^^^^^ comment.block.documentation.dart
>///
#^^^ comment.block.documentation.dart
>/// Text
#^^^^^^^^ comment.block.documentation.dart
>var moreBackticks;
#^^^ storage.type.primitive.dart
# ^ punctuation.terminator.dart
>
>/// Multiline dartdoc comment with more closing backticks.
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart
>///
#^^^ comment.block.documentation.dart
>/// ``````
#^^^^^^^^^^ comment.block.documentation.dart
>/// code in six backticks
#^^^^ comment.block.documentation.dart
# ^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart variable.other.source.dart
>/// ```
#^^^^ comment.block.documentation.dart
# ^^^ comment.block.documentation.dart variable.other.source.dart
>/// still code
#^^^^ comment.block.documentation.dart
# ^^^^^^^^^^ comment.block.documentation.dart variable.other.source.dart
>/// ``````````````````
#^^^^^^^^^^^^^^^^^^^^^^ comment.block.documentation.dart
>///
#^^^ comment.block.documentation.dart
>/// Text
#^^^^^^^^ comment.block.documentation.dart
>var moreClosingBackticks;
#^^^ storage.type.primitive.dart
# ^ punctuation.terminator.dart
24 changes: 24 additions & 0 deletions packages/devtools_app/test/test_infra/test_data/syntax_highlighting/comments.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,27 @@ var g;
/// Dartdoc with reference to [a].
/// And a link to [example.org](http://example.org/).
var h;

/// Multiline dartdoc comment with more than three backticks.
///
/// ``````
/// code in six backticks
/// ```
/// three backticks is nested code
/// ```
/// more code
/// ``````
///
/// Text
var moreBackticks;

/// Multiline dartdoc comment with more closing backticks.
///
/// ``````
/// code in six backticks
/// ```
/// still code
/// ``````````````````
///
/// Text
var moreClosingBackticks;
Loading