PL/SQL Embedded Languages
Syntax highlighting for HTML, CSS, and JavaScript embedded within PL/SQL string literals in Oracle HTP (HyperText Procedures) function calls.
Features
🎨 Automatic HTML Syntax Highlighting
Write HTML in PL/SQL strings and get full syntax highlighting - no configuration needed!
BEGIN
htp.p('<div class="container">');
htp.p(' <h1>Hello World</h1>');
htp.p(' <p>This HTML is <strong>highlighted</strong>!</p>');
htp.p('</div>');
END;
🎯 CSS & JavaScript Support
CSS in <style> tags and JavaScript in <script> tags are automatically highlighted:
BEGIN
htp.p('<style>');
htp.p(' .container { width: 100%; }');
htp.p(' h1 { color: blue; }');
htp.p('</style>');
htp.p('<script>');
htp.p(' function test() {');
htp.p(' console.log("Hello!");');
htp.p(' }');
htp.p('</script>');
END;
✨ Full IDE Support
- Syntax Highlighting: HTML, CSS, and JavaScript are highlighted with their native grammars
- Bracket Matching: Place cursor on
<div> and VS Code highlights the matching </div>
- Auto-Closing: Type
<div and VS Code suggests completing with > and creates </div>
- Error Detection: Syntax errors in HTML/CSS/JS are detected automatically
- IntelliSense: HTML tag and attribute suggestions (from VS Code's built-in HTML support)
🔧 Supported Functions
The extension detects and highlights HTML in these Oracle HTP and OWA_UTIL functions:
Basic Output:
htp.p()htp.print()htp.prn()htp.prints()
HTML Structure:
htp.htmlopen() / htp.htmlclose()htp.headopen() / htp.headclose()htp.bodyopen() / htp.bodyclose()htp.header()
Content Formatting:
htp.para()htp.div()htp.br()htp.hr()htp.bold() / htp.italic()htp.anchor() / htp.mailto()
Tables:
htp.tableopen() / htp.tableclose()htp.tablerowopen() / htp.tablerowclose()htp.tableheader() / htp.tabledata()
OWA Utilities:
owa_util.showpage()owa_util.listprint()
Requirements
No dependencies! This is a standalone extension that works out of the box.
- VS Code version 1.80.0 or higher
- That's it! No other PL/SQL extensions required.
Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X to open Extensions view
- Search for "PL/SQL Embedded Languages"
- Click Install
Manual Installation
- Download the
.vsix file from the Releases page
- Open VS Code
- Press
Ctrl+Shift+P and run "Extensions: Install from VSIX..."
- Select the downloaded
.vsix file
Usage
Just write PL/SQL code with HTP calls - highlighting works automatically!
Basic Example
CREATE OR REPLACE PROCEDURE show_page IS
BEGIN
htp.p('<!DOCTYPE html>');
htp.p('<html>');
htp.p('<head>');
htp.p(' <title>My Page</title>');
htp.p(' <style>');
htp.p(' body { font-family: Arial; }');
htp.p(' .highlight { color: red; }');
htp.p(' </style>');
htp.p('</head>');
htp.p('<body>');
htp.p(' <h1 class="highlight">Welcome!</h1>');
htp.p(' <p>This is a test page.</p>');
htp.p('</body>');
htp.p('</html>');
END;
/
Quote Styles
Both single and double quotes work:
-- Single quotes for PL/SQL, double quotes for HTML
htp.p('<div class="test">Content</div>');
-- Double quotes for PL/SQL, single quotes for HTML
htp.p("<div class='test'>Content</div>");
Escaped Quotes
PL/SQL quote escaping ('' and "") is handled correctly:
htp.p('<div title="It''s working!">Test</div>');
Case Insensitive
Function names work in any case:
htp.p('<div>lowercase</div>');
HTP.P('<div>UPPERCASE</div>');
Htp.P('<div>MixedCase</div>');
File Extensions
The extension activates for these file types:
.sql.pls.plsql.pkb (package body).pks (package spec).pck (package).fnc (function).prc (procedure).trg (trigger)
Known Limitations
String Concatenation
When using PL/SQL's concatenation operator (||), highlighting stops at the first closing quote:
-- Highlighting stops after 'Hello '
htp.p('<div>Hello ' || l_name || '</div>');
Workaround: This is expected behavior since the variable part shouldn't be highlighted as HTML anyway.
Regular Strings
Only strings inside HTP/OWA_UTIL function calls are highlighted. Regular PL/SQL strings are not affected:
-- NOT highlighted (correct)
l_html := '<div>Just a string</div>';
DBMS_OUTPUT.PUT_LINE('<p>Not highlighted</p>');
-- Highlighted (correct)
htp.p('<div>This IS highlighted</div>');
Development
Testing the Extension
- Clone this repository
- Open in VS Code
- Press
F5 to launch Extension Development Host
- Open
test-samples/test-html.sql to see highlighting in action
Debugging
Use VS Code's Developer Tools to inspect token scopes:
- Right-click in editor → "Inspect Editor Tokens and Scopes"
- Or press
Ctrl+Alt+F12 (Windows/Linux) or Cmd+Alt+F12 (Mac)
Expected scopes for htp.p('<div>'):
source.plsql
meta.embedded.block.html
source.html
meta.tag.structure.any.html
Contributing
Contributions are welcome! Please feel free to:
- Report bugs via GitHub Issues
- Suggest features
- Submit pull requests
Building from Source
# Install dependencies (if any in future)
npm install
# Package the extension
vsce package
# Install the .vsix file in VS Code
code --install-extension plsql-embedded-languages-0.1.0.vsix
Roadmap
Future Enhancements
Phase 2:
- Explicit language hints:
/* @lang css */htp.p('...')
- Support for more Oracle web generation functions
- Performance optimizations for large files
Phase 3:
- Enhanced IntelliSense for HTP functions
- Code snippets for common patterns
- Formatting support for embedded HTML/CSS/JS
- Quick fixes for common errors
Troubleshooting
Highlighting not working?
- Check file extension: Make sure your file ends with
.sql, .pls, or another supported extension
- Reload window: Press
Ctrl+Shift+P → "Developer: Reload Window"
- Check syntax: Make sure you're using
htp.p() or another supported function
- Inspect scopes: Use "Inspect Editor Tokens and Scopes" to see what's detected
- The extension uses simple regex patterns optimized for performance
- If you experience slowdowns with very large files (10,000+ lines), please report an issue
Conflicts with other extensions?
This extension provides its own standalone PL/SQL grammar, so it shouldn't conflict with other PL/SQL extensions. If you experience issues:
- Try disabling other PL/SQL extensions temporarily
- Report the issue with details about which extension conflicts
License
MIT License - see LICENSE file for details.
Acknowledgments
Release Notes
See CHANGELOG.md for detailed release notes.
Enjoy highlighting your PL/SQL web code! If you find this extension helpful, please consider:
- ⭐ Starring the repository
- 📝 Writing a review on the VS Code Marketplace
- 🐛 Reporting bugs or suggesting features
Made with ❤️ for the PL/SQL community
