Codeviewer

A command-line application to highlight dart source code.

Overview

Code segments are highlighted before the app is compiled. This is done because the highlighting process can take 300ms to finish, creating a noticeable delay when the demo switches to code page.

The highlighter takes all files in the lib/demos/ folder and scans each. Highlighted code widgets are stored in the lib/codeviewer/code_segments.dart file.

How to generate code segments

From the gallery/ directory:

1. Make sure you have grinder installed by running flutter pub get.
2. Then run flutter pub run grinder update-code-segments to generate code segments with highlighting.

How to define a block of code to generate highlighting for

Wrap a block of code with lines // BEGIN yourDemoName and // END to mark it for highlighting. The block in between, as well as any copyright notice and imports at the beginning of the file, are automatically taken and highlighted, and stored as static TextSpan yourDemoName(BuildContext context) in gallery/lib/codeviewer/code_segments.dart. To display the code, go to gallery/lib/data/demos.dart, and add code: CodeSegments.yourDemoName, to your GalleryDemoConfiguration object.

Multiple blocks of code

Use the following method to join multiple blocks of code into a single segment:

// BEGIN yourDemo#2
a();
// END
b();
// BEGIN yourDemo#1
c();
// END

The generated code will be

c();
a();

Code blocks can nest or overlap. In these cases, specify which file(s) to END.

The following source file

// BEGIN demoOne
a();
// BEGIN demoTwo
b();
// END demoOne
c();
// END demoTwo

will create the following segments: (demoOne)

a();
b();

(demoTwo)

b();
c();