Intermediate
How to embed custom code blocks on Teachable
Quick Answer
Custom code blocks can be embedded in Teachable lessons using the HTML/Embed block feature in the course editor. You can add syntax-highlighted code snippets, interactive code demos, or external code playground embeds through the content editor's HTML block functionality.
Prerequisites
- Access to Teachable course admin dashboard
- Basic HTML/CSS knowledge
- Course content editing permissions
- Understanding of iframe and embed concepts
1
Access your course lesson editor
Navigate to your Teachable admin dashboard and select Courses from the main menu. Click on the course where you want to add code blocks, then select the specific lesson. Click Edit Lesson to open the content editor.
Tip
Make sure you're in the correct course section before editing to avoid confusion
2
Add an HTML/Embed content block
In the lesson editor, click the + Add Content button where you want to insert your code block. From the content options, select HTML/Embed. This will create a new HTML block in your lesson content.
3
Insert basic code block HTML
In the HTML editor, paste your custom code block using proper HTML structure:
Replace the sample code with your actual code content.
<div class="code-block">
<pre><code>
// Your code here
function example() {
return 'Hello World';
}
</code></pre>
</div>Replace the sample code with your actual code content.
Tip
Use proper HTML encoding for special characters like < and > to prevent display issues
4
Add syntax highlighting with Prism.js
To add syntax highlighting, include Prism.js CSS and JavaScript in your HTML block:
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<pre><code class="language-javascript">
// Your JavaScript code here
</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>Tip
Change 'language-javascript' to match your programming language (e.g., 'language-python', 'language-html')
5
Embed interactive code playgrounds
For interactive code blocks, embed CodePen, JSFiddle, or Repl.it using their iframe embed codes:
Replace the src URL with your actual CodePen, JSFiddle, or Repl.it embed URL.
<iframe height="400" style="width: 100%;" scrolling="no" title="Code Example" src="https://codepen.io/username/embed/xxxxxx?height=400&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>Replace the src URL with your actual CodePen, JSFiddle, or Repl.it embed URL.
Tip
Set responsive width using 'width: 100%' to ensure mobile compatibility
6
Style your code blocks with custom CSS
Add custom styling within the HTML block to improve appearance:
<style>
.code-block {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin: 10px 0;
overflow-x: auto;
}
.code-block pre {
margin: 0;
font-family: 'Courier New', monospace;
}
</style>Tip
Test your CSS styling in the preview mode to ensure it displays correctly on all devices
7
Preview and publish your lesson
Click Preview to test how your code blocks appear to students. Check that syntax highlighting works properly and interactive elements function correctly. Once satisfied, click Save to save your changes, then Publish to make the lesson available to students.
Tip
Always test your embedded code blocks on both desktop and mobile devices before publishing
Troubleshooting
Code block not displaying with proper formatting
Ensure you're using proper
<pre> and <code> HTML tags and check that special characters are properly encoded using HTML entities.Syntax highlighting not working
Verify that Prism.js CSS and JavaScript files are properly linked and that you're using the correct language class (e.g.,
language-javascript) on your code elements.Interactive code playground iframe not loading
Check that the embed URL is correct and that the external service (CodePen, JSFiddle) allows iframe embedding. Some services require specific embed URLs rather than direct page URLs.
Code block not responsive on mobile devices
Add
overflow-x: auto to your CSS and ensure iframe elements have width: 100% and appropriate max-width settings for mobile compatibility.Ready to get started with Teachable?
Put this tutorial into practice. Visit Teachable and follow the steps above.
Visit Teachable →