How to Highlight Code Snippets Inside Iframe Mode

You’ve styled your code snippets beautifully in Froala’s normal mode. Syntax highlighting works. Everything looks professional. Then you switch to iframe mode for security and isolation, and your code snippets turn into plain, unstyled text.

This isn’t a bug. It’s the nature of iframes: they’re sandboxes. Styles don’t cascade across the boundary. But Froala offers an easy solution to this, and it’s worth solving because iframe mode offers real protection and stability that normal mode can’t match.

This guide shows you exactly why this happens and how to make code snippets look great in iframe mode.

Key Takeaways

• The Code Snippet plugin uses Prism.js for syntax highlighting. Prism must be loaded on the page for the plugin to work.

• Iframe mode isolates content, so styles stay scoped to each document. You must inject stylesheets into the iframe for highlighting to work.

• Use iframeStyleFiles as your primary solution. It’s the recommended, cleanest way to load external stylesheets like Prism themes and plugin CSS into the iframe. It’s more maintainable than embedding CSS strings.

• Understand the three iframe styling options:

• iframeDefaultStyle: Froala’s foundation.

• iframeStyle: Quick inline tweaks and custom rules.

• iframeStyleFiles: External libraries and frameworks. Use this for syntax highlighting.

• Choose iframe mode for production. The extra security, CSS isolation, and predictable rendering outweigh the minimal performance cost.

Why Code Snippets Break in Iframe Mode

When you embed content in an iframe, you’re creating an isolated document environment. Think of it like a separate webpage inside your webpage. CSS from the parent page doesn’t leak in. JavaScript events don’t cross the boundary. It’s sealed.

That’s powerful for preventing conflicts and security issues. It’s terrible for styling.

In normal mode, your code snippet styles live in the parent document’s stylesheet. The highlighting library (Prism.js) applies classes, and your CSS colors them. Seamless.

In iframe mode, that stylesheet isn’t there. The iframe has its own

and . Your styles are orphaned on the other side of the sandbox wall. The code renders naked.

Understanding Froala’s Modes: Normal vs. Iframe

Normal Mode: Froala injects the editor content directly into the DOM of your page. It’s fast, simple, and convenient. Styles inherit naturally. But it’s also vulnerable to CSS conflicts and less isolated from the rest of your application.

new FroalaEditor("div#froala-editor");

Iframe Mode: Froala creates an actual iframe element and renders the editor inside it. The editor content lives in a completely separate document. This isolation prevents CSS leakage and protects your editor from unexpected style interactions. The tradeoff: you have to explicitly bring in everything the editor needs, stylesheets, fonts, syntax highlighting.

new FroalaEditor("div#froala-editor",{

iframe: true

});

When to Use Iframe Mode (and When to Skip It)

Use iframe mode when:

• You need strong style isolation (your page has aggressive CSS that might interfere)

• Security matters (you’re handling untrusted content)

• You want predictable rendering across different page contexts

• You’re building a reusable editor component that should look the same everywhere

Skip iframe mode when:

• You control all the CSS and can guarantee no conflicts

• Performance is critical (iframes add overhead)

• You need tight integration with your page’s styling system

• Your use case is simple and low-risk

Most professional applications, especially those handling user-generated content, lean toward iframe mode.

Froala’s Code Snippet Feature: The Basics

Froala has a built-in code snippet plugin that lets users insert, edit, and syntax-highlight code blocks. When you enable it, editors get a modal to choose a language, paste code, and format it with Prism.js syntax highlighting.

The plugin ships with support for JavaScript, TypeScript, Python, HTML, CSS, Java, C, SQL, and JSON. You can customize the available languages through the codeSnippetLanguage option.

The highlighting works by having Prism.js wrap code tokens in semantic <span> tags with class names like token string, token number, etc. The difference between normal and iframe modes: in iframe mode, unless you explicitly load Prism’s CSS inside the iframe, those spans are unstyled. You get the markup but no colors.

Setup in Normal Mode (The Baseline)

Here’s the standard setup in normal mode:

<!DOCTYPE html>
<html>
<head>
  <!-- Include Froala's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">


  <!-- Include Prism CSS for syntax highlighting -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>


  <!-- Include Prism Core and Autoloader -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>


  <script>
    new FroalaEditor('#editor', {
      plugins: ['codeSnippet']
    });
  </script>
</body>
</html>

You load the plugin JS and CSS, include Prism.js and its CSS, and initialize Froala with the codeSnippet plugin enabled. The code snippets render with syntax highlighting. Simple.

Setup in Iframe Mode

In iframe mode, the primary way to inject stylesheets into the isolated iframe document is using the iframeStyleFiles option. This is the recommended approach because it’s clean, maintainable, and properly handles external resources.

<!DOCTYPE html>
<html>
<head>
  <!-- Include Froala's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">

</head>
<body>
  <div id="editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>


  <!-- Include Prism Core and Autoloader -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>

  <script>
    new FroalaEditor('#editor', {
      iframe: true,
      plugins: ['codeSnippet'],
      codeSnippetDefaultLanguage: 'javascript',
      iframeStyleFiles: [
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
      ]
    });
  </script>
</body>
</html>

The iframeStyleFiles array loads external CSS files directly into the iframe. Froala injects them as <link> tags in the iframe’s <head>, making the Prism highlighting theme and Code Snippet plugin styles available inside the sandbox.

Understanding Iframe Style Options

Froala offers three ways to style content inside an iframe. Understanding the difference ensures you use the right tool for each situation.

iframeDefaultStyle

This is Froala’s built-in baseline styling. It handles essential layout properties that the editor needs to function correctly, positioning, z-index, overflow, user selection behavior, and basic typography.

Default value:

html{margin: 0px;}body{padding:10px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block;}

You rarely need to modify this unless you’re doing something unconventional. It’s foundational and required for the editor to work properly.

iframeStyle

This is for custom inline CSS rules. You write CSS as a string and it gets injected as a <style> tag inside the iframe, layered on top of iframeDefaultStyle. Use this for small tweaks, custom fonts, padding adjustments, color overrides, or inline style rules you want to apply inside the editor.

Example:

iframeStyle: 'body{padding:20px;} pre{font-family:"Courier New",monospace;}'

iframeStyleFiles

This is for external CSS files. You pass an array of URLs (local or CDN), and Froala loads them as <link> tags inside the iframe. Use this for syntax highlighting libraries and larger CSS frameworks that live in separate files.

Example:

iframeStyleFiles: [

  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css',

]

When to Use Each

• iframeDefaultStyle: Leave it alone. It’s Froala’s foundation and necessary for the editor to function.

• iframeStyle: Quick inline tweaks. Font changes, spacing adjustments, minor color overrides, or small style rules.

• iframeStyleFiles: External libraries and plugins. This is the primary and recommended way to add syntax highlighting support in iframe mode. Use it for Prism themes, icon fonts, CSS frameworks, and any stylesheet that lives in a separate file.

Why iframeStyleFiles is the Right Approach

iframeStyleFiles is preferred for code highlighting because:

• Cleaner configuration: One array of file URLs instead of embedding CSS strings.

• Better maintainability: CSS lives in proper files, not configuration strings.

• Proper resource loading: External stylesheets are handled the way they’re designed to be.

• Easier debugging: You can inspect the iframe and see linked stylesheets in the Network tab.

• Better performance: External files can be cached by the browser.

A Complete, Working Example

Here’s a full implementation with iframe mode and proper code snippet highlighting:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Froala Code Snippets in Iframe Mode</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">

  <style>
    body {
      font-family: sans-serif;
      max-width: 800px;
      margin: 40px auto;
    }
    #editor {
      border: 1px solid #ddd;
      min-height: 400px;
    }
  </style>
</head>
<body>
  <h1>Code Snippets in Iframe Mode</h1>
  <p>Use the toolbar to insert a code snippet and select your language.</p>
  <div id="editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>

  <script>
    new FroalaEditor('#editor', {
      iframe: true,
      plugins: ['codeSnippet'],
      codeSnippetDefaultLanguage: 'javascript',
      iframeStyleFiles: [
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
      ]
    });
  </script>
</body>
</html>

Drop this in a file, open it in your browser, and use the toolbar to insert a code snippet. The syntax highlighting should render perfectly inside the iframe.

Troubleshooting: What Might Still Break

Styles not applying? Check the browser console (right-click → Inspect → Console) and then the Network tab. Look for CORS errors or 404s on the CSS URLs in iframeStyleFiles. If the stylesheets can’t load, styles won’t apply.

Plugin not showing in toolbar? Make sure you’ve loaded the Code Snippet plugin JS before initializing Froala, and that you’ve included ‘codeSnippet’ in the plugins array.

Font looks wrong? You can add custom font imports to iframeStyle to complement your stylesheet files:

iframeStyle: '@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap"); pre { font-family: "JetBrains Mono", monospace; }',

iframeStyleFiles: [

  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'

]

Content looks cramped or overflows? Adjust padding and width by adding custom styles to iframeStyle or create a custom CSS file and add it to iframeStyleFiles.

FAQ

Can I customize the available languages?

Yes. Use the codeSnippetLanguage option to override the defaults:

new FroalaEditor('#editor', {

  iframe: true,

  plugins: ['codeSnippet'],

  codeSnippetLanguage: {

    'JavaScript': 'javascript',

    'Python': 'python',

    'Go': 'go'

  },

  iframeStyleFiles: [...]

});

What languages does the plugin support?

Out of the box: JavaScript, TypeScript, Python, HTML, CSS, Java, C, SQL, and JSON. Prism.js supports many more languages through its autoloader, just add them to codeSnippetLanguage and Prism will load the grammar automatically.

Why not just disable iframe mode?

You can, but you lose the isolation benefits. Iframes protect your editor from CSS interference and provide better encapsulation. For production apps, iframe mode offers more predictable rendering.

Does iframe mode affect performance?

Iframes add a small amount of overhead compared to normal mode. For most applications, the difference is negligible, and the isolation benefits make it worthwhile.

How do I use different Prism themes?

Pass a different Prism theme URL to iframeStyleFiles. Popular Prism themes:

• prism.min.css (default, light background)

• prism-dark.min.css

• prism-twilight.min.css

• prism-okaidia.min.css

Example:

iframeStyleFiles: [

  'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css',

]

Can I customize the highlighting colors?

Yes. Write custom CSS in iframeStyle to override Prism token styles. For example:

iframeStyle: '.token.string { color: #your-custom-color; }'

Conclusion

The Code Snippet plugin paired with Prism.js syntax highlighting gives your users a professional, reliable way to share code. When you set it up correctly in iframe mode, the code doesn’t just look good, it looks consistent everywhere, protected from CSS interference, isolated from the chaos of the surrounding page.

You now have everything you need to build a robust, secure code editor. The path is clear: load your stylesheets, configure iframeStyleFiles, and let Prism do the highlighting work it was designed for.

This article was on the Froala blog.