Using Code Blocks to Add Custom Scripts and HTML to Your Website
Code blocks let you embed custom HTML, Markdown, CSS, and JavaScript to enhance your site beyond standard features. They're ideal for adding third-party widgets, customizing pages, or displaying code snippets.
To add a code block:
- Click Add Block and select Code
- Click the pencil icon to open the block editor
- Enter your code in the text field
- Select the appropriate code type (HTML or Markdown)
For displaying code snippets:
- Enable the Display Source toggle
- Code will be automatically formatted for readability
- Better option than using text blocks for code examples
For rendering CSS and JavaScript:
- Select HTML from the Type menu
- Wrap CSS code in
<style>
tags - Wrap JavaScript code in
<script>
tags
Disabled scripts alert message
Troubleshooting tips:
- Code may not appear while logged in (use Preview in Safe Mode)
- Remove pages from Index to test functionality
- Disable Ajax if experiencing issues
- Disable scripts in preview if unable to edit
- Contact the code source for widget-specific issues
Best practices:
- Ensure code is properly formatted
- Test thoroughly before publishing
- Consider mobile responsiveness
- Keep code organized and documented
For additional help:
- Consult documentation for specific features
- Visit developer forums
- Consider hiring an expert for complex customizations
Remember to always backup your site before adding custom code and test changes across different browsers and devices.