nfaiz / ci4-debug-toolbar
SQL Syntax Highlighter for CodeIgniter 4 Database Debug Toolbar.
Installs: 1 244
Dependents: 0
Suggesters: 0
Security: 0
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Requires
- codeigniter4/framework: ^4
- scrivo/highlight.php: ^9.18
This package is auto-updated.
Last update: 2021-10-20 04:08:02 UTC
README
Moved to here
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
anddark
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

- Dark

After using highlighter
- Light (using default.css)

- Dark (using dark.css)

Another example
- Light (using atom-one-light.css)

- Dark (using atom-one-dark.css)

Credit
- Highlight.php
- Inspired by this pull request