Add code block, inline code, and anchor link support to build-pages.py

- Add convert_code_blocks for fenced code blocks with syntax highlighting classes
- Add convert_inline_code for backtick inline code to <code> tags
- Add slugify function to generate anchor IDs from header text
- Update convert_headers to add id attributes for working anchor links
- Add CSS styles for code and pre elements in page template
- Regenerate all HTML pages with proper code formatting

Author: jeremymanning

assignments/assignment-1/index.html

@@ -157,6 +157,29 @@
         .content tr:hover {
             background: var(--surface-color);
         }
+        .content code {
+            background: var(--surface-color);
+            padding: 0.2em 0.4em;
+            border-radius: 4px;
+            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+            font-size: 0.9em;
+            color: var(--primary-color);
+        }
+        .content pre {
+            background: var(--surface-color);
+            padding: 1rem;
+            border-radius: var(--radius-md);
+            overflow-x: auto;
+            margin: 1rem 0;
+            border: 1px solid var(--border-color);
+        }
+        .content pre code {
+            background: none;
+            padding: 0;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            line-height: 1.6;
+        }
         footer {
             background: var(--surface-color);
             border-top: 1px solid var(--border-color);
@@ -199,9 +222,9 @@ <h1>Course Assignments</h1>
     </header>
 
     <main class="content">
-        <h1>Course Assignments</h1>
+        <h1 id="course-assignments">Course Assignments</h1>
 <p>Welcome to the assignments for PSYC 51.17: Models of Language and Communication.</p>
-<h2>Submission Instructions</h2>
+<h2 id="submission-instructions">Submission Instructions</h2>
 <p>All assignments are submitted via GitHub Classroom. Click the "Accept Assignment" button on each assignment page to get started. This will create a personal repository where you'll complete your work.</p>
 <p><strong>Submission Process:</strong></p>
 <ol>
@@ -211,7 +234,7 @@ <h2>Submission Instructions</h2>
 <li>Commit and push your changes before the deadline</li>
 <li>Your latest commit before the deadline will be graded</li>
 </ol>
-<h2>Assignment Schedule</h2>
+<h2 id="assignment-schedule">Assignment Schedule</h2>
 <table>
 <thead><tr>
 <th>#</th>
@@ -265,34 +288,34 @@ <h2>Assignment Schedule</h2>
 </tr>
 </tbody>
 </table>
-<h2>Late Policy</h2>
+<h2 id="late-policy">Late Policy</h2>
 <p>Assignments receive a 10% deduction for each week late, rounded up to the nearest whole week. The final project must be submitted on time.</p>
-<h2>Grading</h2>
+<h2 id="grading">Grading</h2>
 <p>Each assignment is graded on:</p>
 <ul>
 <li><strong>Correctness</strong>: Does your code produce the expected outputs?</li>
 <li><strong>Code Quality</strong>: Is your code well-organized and documented?</li>
 <li><strong>Understanding</strong>: Do your explanations demonstrate understanding of the concepts?</li>
 </ul>
-<h2>Getting Help</h2>
+<h2 id="getting-help">Getting Help</h2>
 <ul>
 <li><strong>Office Hours</strong>: By appointment</li>
 <li><strong>Discord</strong>: Join our class server for discussions</li>
 <li><strong>GitHub Issues</strong>: Report bugs or ask questions on the assignment repositories</li>
 </ul>
 <hr>
-<h2>Assignments</h2>
-<h3><a href="./assignment-1/">Assignment 1: ELIZA Chatbot</a></h3>
+<h2 id="assignments">Assignments</h2>
+<h3 id="assignment-1-eliza-chatbotassignment-1"><a href="./assignment-1/">Assignment 1: ELIZA Chatbot</a></h3>
 <p>Build a pattern-matching chatbot based on Weizenbaum's classic ELIZA program. Learn about string manipulation, regular expressions, and the foundations of conversational AI.</p>
-<h3><a href="./assignment-2/">Assignment 2: SPAM Classifier</a></h3>
+<h3 id="assignment-2-spam-classifierassignment-2"><a href="./assignment-2/">Assignment 2: SPAM Classifier</a></h3>
 <p>Develop a text classification system to identify spam messages. Explore feature engineering, tokenization, and evaluation metrics.</p>
-<h3><a href="./assignment-3/">Assignment 3: Wikipedia Embeddings</a></h3>
+<h3 id="assignment-3-wikipedia-embeddingsassignment-3"><a href="./assignment-3/">Assignment 3: Wikipedia Embeddings</a></h3>
 <p>Compare different text embedding methods on Wikipedia articles. Visualize semantic relationships and evaluate embedding quality.</p>
-<h3><a href="./assignment-4/">Assignment 4: Customer Service Chatbot</a></h3>
+<h3 id="assignment-4-customer-service-chatbotassignment-4"><a href="./assignment-4/">Assignment 4: Customer Service Chatbot</a></h3>
 <p>Create a context-aware customer service chatbot using transformer-based models. Implement retrieval and response generation.</p>
-<h3><a href="./assignment-5/">Assignment 5: Build GPT</a></h3>
+<h3 id="assignment-5-build-gptassignment-5"><a href="./assignment-5/">Assignment 5: Build GPT</a></h3>
 <p>Implement and train a small GPT model from scratch. Understand the transformer architecture, attention mechanisms, and autoregressive generation.</p>
-<h3><a href="./final-project/">Final Project: Research Project</a></h3>
+<h3 id="final-project-research-projectfinal-project"><a href="./final-project/">Final Project: Research Project</a></h3>
 <p>Conduct an independent research project applying concepts from the course. Present your findings to the class.</p>
     </main>
 

assignments/assignment-2/index.html

@@ -48,12 +48,35 @@ def convert_latex_table(text):
     return text
 
 
+def slugify(text):
+    """Convert text to URL-friendly slug for anchor IDs."""
+    slug = text.lower()
+    slug = re.sub(r"[^\w\s-]", "", slug)
+    slug = re.sub(r"[\s_]+", "-", slug)
+    slug = slug.strip("-")
+    return slug
+
+
 def convert_headers(html):
-    """Convert markdown headers to HTML."""
-    html = re.sub(r"^#### (.+)$", r"<h4>\1</h4>", html, flags=re.MULTILINE)
-    html = re.sub(r"^### (.+)$", r"<h3>\1</h3>", html, flags=re.MULTILINE)
-    html = re.sub(r"^## (.+)$", r"<h2>\1</h2>", html, flags=re.MULTILINE)
-    html = re.sub(r"^# (.+)$", r"<h1>\1</h1>", html, flags=re.MULTILINE)
+    """Convert markdown headers to HTML with anchor IDs."""
+
+    def replace_header(match, tag):
+        text = match.group(1)
+        slug = slugify(text)
+        return f'<{tag} id="{slug}">{text}</{tag}>'
+
+    html = re.sub(
+        r"^#### (.+)$", lambda m: replace_header(m, "h4"), html, flags=re.MULTILINE
+    )
+    html = re.sub(
+        r"^### (.+)$", lambda m: replace_header(m, "h3"), html, flags=re.MULTILINE
+    )
+    html = re.sub(
+        r"^## (.+)$", lambda m: replace_header(m, "h2"), html, flags=re.MULTILINE
+    )
+    html = re.sub(
+        r"^# (.+)$", lambda m: replace_header(m, "h1"), html, flags=re.MULTILINE
+    )
     return html
 
 
@@ -65,6 +88,42 @@ def convert_inline_formatting(html):
     return html
 
 
+def convert_code_blocks(text):
+    """Convert fenced code blocks (```) to HTML pre/code tags."""
+    lines = text.split("\n")
+    result = []
+    in_code_block = False
+    code_lines = []
+    lang = ""
+
+    for line in lines:
+        if line.strip().startswith("```") and not in_code_block:
+            in_code_block = True
+            lang = line.strip()[3:].strip()
+            code_lines = []
+        elif line.strip() == "```" and in_code_block:
+            in_code_block = False
+            code_content = "\n".join(code_lines)
+            code_content = (
+                code_content.replace("&", "&amp;")
+                .replace("<", "&lt;")
+                .replace(">", "&gt;")
+            )
+            lang_class = f' class="language-{lang}"' if lang else ""
+            result.append(f"<pre><code{lang_class}>{code_content}</code></pre>")
+        elif in_code_block:
+            code_lines.append(line)
+        else:
+            result.append(line)
+
+    return "\n".join(result)
+
+
+def convert_inline_code(text):
+    """Convert backtick inline code to HTML code tags."""
+    return re.sub(r"`([^`]+)`", r"<code>\1</code>", text)
+
+
 def convert_links(html):
     """Convert markdown links to HTML, handling internal vs external links."""
 
@@ -340,13 +399,14 @@ def wrap_paragraphs(html):
 
 def parse_markdown_to_html(markdown_text):
     """Convert markdown text to HTML."""
-    # Pre-processing
     html = strip_latex_preamble(markdown_text)
     html = convert_latex_href(html)
     html = convert_latex_table(html)
 
+    html = convert_code_blocks(html)
     html = convert_headers(html)
     html = convert_inline_formatting(html)
+    html = convert_inline_code(html)
     html = convert_tables(html)
     html = convert_lists(html)
     html = convert_horizontal_rules(html)
@@ -533,6 +593,29 @@ def get_page_template(title, nav_active, content, depth=1):
         .content tr:hover {{
             background: var(--surface-color);
         }}
+        .content code {{
+            background: var(--surface-color);
+            padding: 0.2em 0.4em;
+            border-radius: 4px;
+            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+            font-size: 0.9em;
+            color: var(--primary-color);
+        }}
+        .content pre {{
+            background: var(--surface-color);
+            padding: 1rem;
+            border-radius: var(--radius-md);
+            overflow-x: auto;
+            margin: 1rem 0;
+            border: 1px solid var(--border-color);
+        }}
+        .content pre code {{
+            background: none;
+            padding: 0;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            line-height: 1.6;
+        }}
         footer {{
             background: var(--surface-color);
             border-top: 1px solid var(--border-color);