Using Code Blocks to Add Custom Scripts and HTML to Your Website

Using Code Blocks to Add Custom Scripts and HTML to Your Website

By Michael Chen

January 18, 2025 at 10:43 AM

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:

  1. Click Add Block and select Code
  2. Click the pencil icon to open the block editor
  3. Enter your code in the text field
  4. 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

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.

Related Articles

Previous Articles