A VS Code extension to quickly insert stylish ASCII or markdown-style comment banners for code and documentation.
If you want your code to look more organized and visually appealing, this extension is for you!
Features
- Insert centered banners with box-drawing characters (e.g.
╔═══╗, ###, ===, ---, ...)
- Language-aware comment prefixes (e.g.
//, #, %)
- It automatically detects the language of the file and uses the appropriate comment syntax (e.g.
//, #, %)
- If the selected text is too long, it will automatically wrap to the next line
- Quick shortcut to insert banners:
Ctrl + Alt + B (Windows/Linux) or Ctrl + Option + B (macOS)
- Multiple styles available: double line, rounded, single line, dashed, thick, classic, equals, arrow, unicode block, fidget
Banner Styles
Here are just a few examples:
Double Line
// ╔════════════════════════════════════════════════════════╗
// ║ SECTION HEADING ║
// ╚════════════════════════════════════════════════════════╝
// ╔════════════════════════════════════════════════════════╗
// ║ SECTION HEADING ║
// ║ You can also add several lines of text inside the box. ║
// ╚════════════════════════════════════════════════════════╝
// ╔════════════════════════════════════════════════════════╗
// ║ SECTION HEADING ║
// ║ You can also add several lines of text inside the box ║
// ║and if it is too long it will automatically wrap to the ║
// ║ next line. ║
// ╚════════════════════════════════════════════════════════╝
Rounded
# ╭────────────────────────────────────────────────────────╮
# │ SECTION HEADING │
# │ You can also add several lines of text inside the box. │
# ╰────────────────────────────────────────────────────────╯
Single Line
% /********************************************************\
% * SECTION HEADING *
% * You can also add several lines of text inside the box. *
% \********************************************************/
Dashed
// +--------------------------------------------------------+
// | SECTION HEADING |
// | You can also add several lines of text inside the box. |
// +--------------------------------------------------------+
Thick
// █▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
// █ SECTION HEADING █
// █ You can also add several lines of text inside the box. █
// █▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█
Classic
// /--------------------------------------------------------\
// | SECTION HEADING |
// | You can also add several lines of text inside the box. |
// \--------------------------------------------------------/
Equals
// ==========================================================
// SECTION HEADING
// You can also add several lines of text inside the box.
// ==========================================================
Arrow
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// > SECTION HEADING >
// > You can also add several lines of text inside the box. >
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Unicode block
// 🭽▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀🭾
// ▌ SECTION HEADING ▐
// ▌ You can also add several lines of text inside the box. ▐
// 🭼▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄🭿
Fidget
// SECTION HEADING
// You can also add several lines of text inside the box.
Usage
- Select text or place cursor
- Open Command Palette (
Ctrl+Shift+P)
- Type: Banner: Insert ASCII Box
- Choose a style from the menu
- Done!
Or use shortcut: Ctrl + Alt + B
Supported Languages
Auto-detects appropriate comment syntax for:
- JavaScript / TypeScript:
//
- Python / Shell:
#
- HTML / Markdown:
<!-- -->
- C / C++:
//
- LaTeX:
%
Install
Search for LaTeX Shortcuts in the Extensions Marketplace.
Or install via CLI:
code --install-extension naela.latex-shortcuts
Author
Publisher: naela (a.k.a. Axel Delaval)
