Inline Code - Tailwind CSS Builder Documentation

Overview

The Inline Code element allows you to embed raw HTML, WordPress shortcodes, JavaScript, or CSS directly into your page. This is useful for adding third-party widgets, custom HTML structures, or any code that isn't available as a native builder element.

Code editing is done through a Monaco Editor modal that provides syntax highlighting, line numbers, and auto-completion for the selected language. The editor opens when you click the Code field in the Inspector or double-click the element on the canvas.

You can choose whether to wrap your code in a <div>, <span>, or output it without a wrapper. The wrapper setting determines how the code integrates with the surrounding layout — use div for block-level content, span for inline content, or none for raw output.

Syntax Highlighting

The Monaco Editor provides syntax highlighting based on the selected language setting. Choose the correct language (HTML, Shortcode, JavaScript, or CSS) to get proper highlighting and error detection.

Settings

Configure the Inline Code element using these Inspector options:

Setting	Description	Default
Code	The code snippet to embed. Click to open the Monaco Editor modal with syntax highlighting and line numbers.	(empty)
Wrapper	The HTML element to wrap your code in. Use `div` for block-level content, `span` for inline content, or `none` for no wrapper.	div
Language	The code language for syntax highlighting in the editor. Options: HTML, Shortcode, JavaScript, CSS.	html

Wrapper Options Explained

The wrapper setting affects how your code integrates with the page layout:

div – Block-level wrapper. Your code will start on a new line and take up the full width available.
span – Inline wrapper. Your code will flow with surrounding text content.
none – No wrapper. The code is output directly without any containing element. Use with caution as this may affect layout.

Examples

HTML Embed

Embed custom HTML structures like a video iframe or third-party widget:

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

WordPress Shortcode

Embed WordPress shortcodes from plugins like Contact Form 7, WooCommerce, or custom shortcodes:

[contact-form-7 id="123" title="Contact Form"]

JavaScript Snippet

Add inline JavaScript for custom functionality. The script will execute when the page loads:

<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Page loaded!');
  // Your custom JavaScript here
});
</script>

CSS Snippet

Add custom CSS styles that apply to your page:

<style>
.custom-highlight {
  background: linear-gradient(120deg, #ffd700 0%, #ffd700 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
}
</style>

Security Note

Only embed code from trusted sources. Inline code is rendered exactly as written and could potentially introduce security vulnerabilities if it contains malicious scripts.

Next Steps

PHP Code – Output PHP statements in site templates
PHP If/Else – Conditional logic for template development
Inspector – Learn about element styling options