highlight.dart

highlight.dart is a faithful Dart port of highlight.js, providing syntax highlighting for 192 languages and 257 themes. It is split into two primary packages:

• highlight: The core Dart package containing the parsing engine, language definitions, and HTML output capabilities.
• flutter_highlight: A Flutter-specific package providing the HighlightView widget, which supports themes and line numbers.

By default, the library includes 192 languages. To reduce bundle size in Dart environments, import package:highlight/highlight_core.dart instead of the main package, and manually register only the specific language definitions you need using registerLanguage.

import 'package:highlight/highlight_core.dart';
import 'package:highlight/languages/dart.dart' as lang_dart;
import 'package:highlight/languages/python.dart' as lang_python;

void main() {
  final h = Highlight();
  h.registerLanguage('dart', lang_dart.dart);
  h.registerLanguage('python', lang_python.python);

  final result = h.highlight('void main() {}', language: 'dart');
  print(result.toHtml());
}

To get started with syntax highlighting, import package:highlight/highlight.dart and call ensureInitialized() to prepare the library. You can then highlight code using a specific language or use auto-detection.

Use hljs.highlight() when you know the language, and hljs.highlightAuto() when you want the library to guess the language from the code snippet.

import 'package:highlight/highlight.dart';

void main() {
  ensureInitialized();

  // Highlight with a specific language
  final result = hljs.highlight(
    'def hello():\n    print("Hello!")',
    language: 'python',
  );
  print(result.toHtml());

  // Auto-detect language
  final auto = hljs.highlightAuto('SELECT * FROM users WHERE id = 1;');
  print('Detected: ${auto.language}'); // sql
  print(auto.toHtml());
}

If you do not know the language of the source code beforehand, you can omit the language parameter in HighlightView. The widget will attempt to auto-detect the language using the underlying highlight engine.

HighlightView(
  unknownCode,
  theme: githubTheme,
)

The HighlightView widget is a drop-in Flutter component for displaying syntax-highlighted code. It supports 192 languages and 257 themes from the highlight.js ecosystem. By default, the code is selectable and supports horizontal scrolling for long lines.

import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/github.dart';
import 'package:highlight/highlight.dart';

class CodeViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ensureInitialized();
    return HighlightView(
      'def hello():\n    print("Hello, World!")',
      language: 'python',
      theme: githubTheme,
      padding: EdgeInsets.all(16),
      textStyle: TextStyle(
        fontFamily: 'JetBrains Mono',
        fontSize: 14,
      ),
    );
  }
}

To display syntax-highlighted code in a Flutter application, use the HighlightView widget from the flutter_highlight package. You can specify the source code, the language, a theme (imported from package:flutter_highlight/themes/...), and whether to show line numbers.

import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/github.dart';
import 'package:highlight/highlight.dart';

HighlightView(
  sourceCode,
  language: 'python',
  theme: githubTheme,
  showLineNumbers: true,
)

To validate package quality gates (similar to the CI process using pana and pub publish --dry-run), you can run the score checks locally using the provided tool script.

dart pub global activate pana 0.23.12
dart run tool/check_pub_score.dart

Since the repository uses conventional-commit style subjects, you can generate changelog sections for a specific package using the tool/generate_changelog.dart script.

Required flags:

• --package: The name of the package (e.g., highlight or flutter_highlight).
• --version: The new version number.
• --from: The previous version to start the history from.
• --write (optional): Updates the package's CHANGELOG.md file in place.

# Generate changelog to stdout
dart run tool/generate_changelog.dart \
  --package highlight \
  --version 0.7.1 \
  --from v0.7.0

# Generate changelog and update CHANGELOG.md in place
dart run tool/generate_changelog.dart \
  --package flutter_highlight \
  --version 0.7.1 \
  --from v0.7.0 \
  --write

You can enable a line number gutter in the HighlightView widget using the showLineNumbers property. You can also configure the starting number and the visual style of the numbers.

HighlightView(
  sourceCode,
  language: 'dart',
  theme: githubTheme,
  showLineNumbers: true,
  firstLineNumber: 1,
  lineNumberStyle: TextStyle(color: Colors.grey),
)

The hljs.highlightAuto(code, languageSubset:) method automatically detects the programming language of the provided code. You can optionally provide a languageSubset to restrict the detection to a specific set of languages.

final auto = hljs.highlightAuto('SELECT * FROM users WHERE id = 1;');
print('Detected: ${auto.language}');