How to embed custom code blocks on Teachable

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.

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.

In the HTML editor, paste your custom code block using proper HTML structure:

<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.

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>

For interactive code blocks, embed CodePen, JSFiddle, or Repl.it using their iframe embed codes:

<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.

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>

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.