Deepyr Documentation

Mockup code with line prefix

Use the `CodeLine` data class to specify content and a prefix for each line.

Preview

npm i daisyui

Dart

MockupCode(
  lines: [
    CodeLine('npm i daisyui', prefix: '\$'),
  ],
  style: [Size.wFull],
)

Multi line

Provide a list of `CodeLine` objects for multiple lines with different styles.

Preview

npm i daisyui

installing...

Done!

Dart

MockupCode(
  lines: [
    CodeLine('npm i daisyui', prefix: '\$'),
    CodeLine('installing...', prefix: '>', style: [TextUtil.warning]),
    CodeLine('Done!', prefix: '>', style: [TextUtil.success]),
  ],
  style: [Size.wFull],
)

Highlighted line

Apply background and text color utilities to a specific `CodeLine` to highlight it.

Preview

npm i daisyui

installing...

Error!

Dart

MockupCode(
  lines: [
    CodeLine('npm i daisyui', prefix: '1'),
    CodeLine('installing...', prefix: '2'),
    CodeLine(
      'Error!',
      prefix: '3',
      style: [BgUtil.warning, TextUtil.warningContent],
    ),
  ],
  style: [Size.wFull],
)

Long line will scroll

The component handles horizontal scrolling for long lines automatically.

Preview

Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.

Dart

MockupCode(
  lines: [
    CodeLine(
      'Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.',
      prefix: '~',
    ),
  ],
  style: [Size.wFull],
)

Without prefix

For simple cases, use the `MockupCode.fromString()` factory for a cleaner API.

Preview

without prefix

Dart

// The `.fromString()` factory automatically handles splitting lines.
MockupCode.fromString(
  'without prefix',
  style: [Size.wFull],
)

With color

Apply background and text color utilities to the main `MockupCode` component.

Preview

can be any color!

Dart

MockupCode.fromString(
  'can be any color!',
  style: [
    BgUtil.primary,
    TextUtil.primaryContent,
    Size.wFull,
  ],
)

From a multi-line String (with automatic line numbers)

Use the `MockupCode.fromString()` factory for the easiest implementation. Pass a multi-line string and set `showLineNumbers: true` to automatically prefix each line.

Preview

void main() {

  print('Hello, Deepyr!');

Dart

// The factory handles splitting the string and numbering the lines.
MockupCode.fromString(
  """
void main() {
  print('Hello, Deepyr!');
}""",
  showLineNumbers: true,
  style: [Size.wFull],
)

From a List of Strings

Use the `MockupCode.fromList()` factory when your code is already represented as a list of strings. This is useful when processing code dynamically.

Preview

git clone https://github.com/PhilippHGerber/ui_components

cd ui_components/examples/deepyr_example

npm install

jaspr serve

Dart

// The factory converts each string in the list to a CodeLine.
MockupCode.fromList(
  [
    'git clone https://github.com/PhilippHGerber/ui_components',
    'cd ui_components/examples/deepyr_example',
    'npm install',
    'jaspr serve',
  ],
  style: [
    Size.wFull,
    BgUtil.accent,
    TextUtil.accentContent,
  ],
)