nfaiz/ci4-debug-toolbar

This package is abandoned and no longer maintained. The author suggests using the nfaiz/dbtoolbar package instead.

SQL Syntax Highlighter for CodeIgniter 4 Database Debug Toolbar.

v1.3.0 2021-07-22 14:16 UTC

README

GitHub GitHub repo size Hits

Moved to here

# ci4-debug-toolbar SQL Syntax Highlighter for CodeIgniter 4 Database Debug Toolbar.

Description

Make CodeIgniter 4 Database Debug Toolbar SQL Syntax to be more readable and themeable.

Table of contents

Requirement

Installation

Install library via composer:

composer require nfaiz/ci4-debug-toolbar

Or refer here for manual installation.

Setup

Library setup can be done via spark:

php spark debugtoolbar:database

This command will try to overwrite some content in app/Config/Events.php and app/Config/Toolbar.php.
Choose overwrite [y] when prompted.

Or refer here for manual setup.

After library installation and setup are completed, refresh page to see result.
See usage to configure with other pre-installed stylesheet themes.

Usage

Change StyleSheet

Open app/Config/Toolbar.php.

Find $sqlCssTheme property.

    public $sqlCssTheme = [
        'light' => 'github',
        'dark'  => 'dracula'
    ];
  • light and dark are mode options for CodeIghniter 4 debug toolbar.
  • Assign stylesheet name without .css extension. E.g 'github'
  • Available stylesheets can be found using utilities

Utilities

Use HighlightUtilities function from Highlight.php.
Please see highlighter-utilities for more information.

E.g In Controller

    // Get available stylesheets.
    $list = \HighlightUtilities\getAvailableStyleSheets();
    d($list);

    // Set true to get available stylesheets with absolute path.
    $listPath = \HighlightUtilities\getAvailableStyleSheets(true);
    d($listPath);

    // Get specific stylesheet path.
    $path = \HighlightUtilities\getStyleSheetPath('github');
    d($path);

Screenshot

Default Database Toolbar

  • Light
Light mode
  • Dark
Dark mode

After using highlighter

  • Light (using default.css)
Light mode
  • Dark (using dark.css)
Dark mode

Another example

  • Light (using atom-one-light.css)
Light mode
  • Dark (using atom-one-dark.css)
Dark mode

Credit