alexandria

@@ -34,6 +34,24 @@     - name: Install dependencies
       run: npm ci
       
+    - name: Verify highlight.js installation
+      run: |
+        echo "🔍 Verifying highlight.js installation..."
+        if npm list highlight.js > /dev/null 2>&1; then
+          echo "✅ highlight.js is installed"
+          npm list highlight.js
+        else
+          echo "❌ highlight.js not found, installing..."
+          npm install highlight.js@^11.11.1
+        fi
+        
+    - name: Verify build dependencies
+      run: |
+        echo "🔍 Verifying all build dependencies..."
+        npm run verify-deps
+        npm list --depth=0
+        echo "✅ All dependencies verified"
+      
     - name: Validate configuration
       run: |
         echo "🔧 Alexandria Configuration Validation"
@@ -56,6 +74,31 @@ run: npm run build       env:
         VITE_DEFAULT_OWNER: ${{ secrets.VITE_DEFAULT_OWNER || 'runawaydevil' }}
         VITE_DEFAULT_REPO: ${{ secrets.VITE_DEFAULT_REPO || 'alexandria' }}
+        
+    - name: Verify build output
+      run: |
+        echo "🔍 Verifying build output..."
+        if [ -d "dist" ]; then
+          echo "✅ Build directory created"
+          ls -la dist/
+          if [ -f "dist/index.html" ]; then
+            echo "✅ index.html generated"
+          else
+            echo "❌ index.html not found"
+            exit 1
+          fi
+          if ls dist/assets/*.css 1> /dev/null 2>&1; then
+            echo "✅ CSS files generated"
+            echo "CSS files:"
+            ls -la dist/assets/*.css
+          else
+            echo "❌ CSS files not found"
+            exit 1
+          fi
+        else
+          echo "❌ Build directory not found"
+          exit 1
+        fi
         
     - name: Setup Pages
       uses: actions/configure-pages@v4

@@ -0,0 +1,75 @@+# Syntax Highlighting no Alexandria
+
+## Configuração
+
+O Alexandria usa `rehype-highlight` com `highlight.js` para fornecer syntax highlighting nos blocos de código Markdown.
+
+### Dependências
+
+- `highlight.js`: ^11.11.1 (dependência direta)
+- `rehype-highlight`: ^7.0.2 (plugin para react-markdown)
+
+### Tema
+
+Utilizamos o tema `github.css` do highlight.js, que é limpo e se adapta bem ao estilo Y2K do Alexandria.
+
+## Como Funciona
+
+1. **Importação**: O CSS do highlight.js é importado no `MarkdownRenderer.tsx`
+2. **Plugin**: O `rehype-highlight` processa os blocos de código
+3. **Estilos**: CSS customizado sobrescreve cores para manter consistência com o tema Y2K
+
+## Linguagens Suportadas
+
+O highlight.js suporta mais de 190 linguagens, incluindo:
+
+- JavaScript/TypeScript
+- Python
+- Java
+- C/C++
+- CSS/SCSS
+- HTML
+- JSON
+- Bash/Shell
+- SQL
+- E muitas outras...
+
+## Personalização
+
+Os estilos são customizados no `MarkdownRenderer.css` para manter a consistência com o tema Y2K:
+
+```css
+.markdown-renderer .hljs {
+  background: var(--background-color) !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--border-color);
+}
+```
+
+## Verificação
+
+Para verificar se o syntax highlighting está funcionando:
+
+1. Acesse um arquivo Markdown com blocos de código
+2. Verifique se palavras-chave, strings e comentários têm cores diferentes
+3. Use o arquivo de teste: `/public/test-syntax.md`
+
+## Troubleshooting
+
+Se o syntax highlighting não estiver funcionando:
+
+1. Verifique se `highlight.js` está instalado: `npm list highlight.js`
+2. Verifique se o CSS está sendo importado corretamente
+3. Verifique o console do navegador para erros
+4. Execute `npm run verify-deps` para verificar dependências
+
+## Build e Deploy
+
+O GitHub Actions verifica automaticamente:
+
+- Instalação do highlight.js
+- Verificação de dependências
+- Build bem-sucedido
+- Geração correta dos assets CSS
+
+Isso garante que o syntax highlighting funcione corretamente em produção.

@@ -9,6 +9,7 @@ "name": "alexandria",       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "highlight.js": "^11.11.1",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-markdown": "^10.1.0",
@@ -59,7 +60,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1224,7 +1224,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",       "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1234,7 +1233,6 @@ "version": "19.2.7",       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1345,7 +1343,6 @@ "url": "https://github.com/sponsors/ai"         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2923,7 +2920,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2975,7 +2971,6 @@ "version": "19.2.3",       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2985,7 +2980,6 @@ "version": "19.2.3",       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3534,7 +3528,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",

@@ -7,7 +7,8 @@ "scripts": {     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "verify-deps": "node -e \"console.log('✅ highlight.js:', require('highlight.js/package.json').version); console.log('✅ rehype-highlight: installed');\""
   },
   "keywords": [
     "github",
@@ -21,6 +22,7 @@ "author": "Runaway Devil <runawaydevil@pm.me>",   "license": "MIT",
   "homepage": "https://runawaydevil.github.io/Alexandria/",
   "dependencies": {
+    "highlight.js": "^11.11.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",

@@ -0,0 +1,101 @@+# Teste de Syntax Highlighting
+
+Este arquivo testa se o syntax highlighting está funcionando corretamente.
+
+## JavaScript
+
+```javascript
+function helloWorld() {
+  console.log("Hello, World!");
+  const message = "Alexandria is working!";
+  return message;
+}
+
+// Comentário em JavaScript
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+```
+
+## Python
+
+```python
+def hello_world():
+    """Função que imprime Hello World"""
+    message = "Hello, World!"
+    print(message)
+    return message
+
+# Comentário em Python
+numbers = [1, 2, 3, 4, 5]
+doubled = [n * 2 for n in numbers]
+```
+
+## TypeScript
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+class UserService {
+  private users: User[] = [];
+  
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+  
+  getUser(id: number): User | undefined {
+    return this.users.find(user => user.id === id);
+  }
+}
+
+// Comentário em TypeScript
+const userService = new UserService();
+```
+
+## CSS
+
+```css
+.markdown-renderer {
+  font-family: Arial, sans-serif;
+  line-height: 1.4;
+  color: #000000;
+}
+
+/* Comentário em CSS */
+.hljs {
+  background: #ffffff !important;
+  border: 1px solid #cccccc;
+}
+```
+
+## JSON
+
+```json
+{
+  "name": "alexandria",
+  "version": "1.0.0",
+  "dependencies": {
+    "highlight.js": "^11.11.1",
+    "react": "^19.2.3"
+  }
+}
+```
+
+## Bash
+
+```bash
+#!/bin/bash
+echo "Installing dependencies..."
+npm install
+npm run build
+
+# Comentário em Bash
+if [ -f "package.json" ]; then
+  echo "Package.json found!"
+fi
+```
+
+Se você conseguir ver cores diferentes para palavras-chave, strings, comentários e outros elementos, o syntax highlighting está funcionando!

@@ -279,20 +279,81 @@ background: var(--background-color) !important;   color: var(--text-color) !important;
   border: 1px solid var(--border-color);
   padding: 8px;
+  font-size: 11px;
+  font-family: 
+    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",
+    "Consolas", "Courier New",
+    "Liberation Mono", "DejaVu Sans Mono", "Noto Sans Mono",
+    Courier, monospace;
+  overflow-x: auto;
+  border-radius: 0; /* Y2K style - no rounded corners */
 }
 
-.markdown-renderer .hljs-keyword {
-  color: var(--primary-color) !important;
+/* Syntax highlighting color overrides for Y2K theme */
+.markdown-renderer .hljs-keyword,
+.markdown-renderer .hljs-selector-tag,
+.markdown-renderer .hljs-literal,
+.markdown-renderer .hljs-section,
+.markdown-renderer .hljs-link {
+  color: #000000 !important;
   font-weight: bold;
 }
 
-.markdown-renderer .hljs-string {
-  color: var(--text-secondary) !important;
+.markdown-renderer .hljs-string,
+.markdown-renderer .hljs-title,
+.markdown-renderer .hljs-name,
+.markdown-renderer .hljs-type,
+.markdown-renderer .hljs-attribute,
+.markdown-renderer .hljs-symbol,
+.markdown-renderer .hljs-bullet,
+.markdown-renderer .hljs-built_in,
+.markdown-renderer .hljs-addition,
+.markdown-renderer .hljs-variable,
+.markdown-renderer .hljs-template-tag,
+.markdown-renderer .hljs-template-variable {
+  color: #666666 !important;
+}
+
+.markdown-renderer .hljs-comment,
+.markdown-renderer .hljs-quote,
+.markdown-renderer .hljs-deletion,
+.markdown-renderer .hljs-meta {
+  color: #999999 !important;
+  font-style: italic;
 }
 
-.markdown-renderer .hljs-comment {
-  color: var(--text-secondary) !important;
+.markdown-renderer .hljs-number,
+.markdown-renderer .hljs-regexp,
+.markdown-renderer .hljs-selector-id,
+.markdown-renderer .hljs-selector-class,
+.markdown-renderer .hljs-selector-attr,
+.markdown-renderer .hljs-selector-pseudo,
+.markdown-renderer .hljs-doctag,
+.markdown-renderer .hljs-formula {
+  color: #333333 !important;
+}
+
+.markdown-renderer .hljs-emphasis {
   font-style: italic;
+}
+
+.markdown-renderer .hljs-strong {
+  font-weight: bold;
+}
+
+/* Ensure code blocks in pre tags are properly styled */
+.markdown-renderer pre .hljs {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* Fix for inline code vs block code */
+.markdown-renderer pre code {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  font-size: inherit !important;
 }
 
 /* Responsive adjustments */

@@ -6,6 +6,8 @@ import rehypeHighlight from 'rehype-highlight' import rehypeRaw from 'rehype-raw'
 import { LinkRewriter } from '../../services/LinkRewriter'
 import { DocumentContext } from '../../types'
+// Import a clean, minimal highlight.js theme that works well with Y2K style
+import 'highlight.js/styles/github.css'
 import './MarkdownRenderer.css'
 
 interface MarkdownRendererProps {