Soporte completo de Markdown (GFM) - FreeJS

- GitHub Flavored Markdown con kramdown
- Preview server-side sin JavaScript
- Ver codigo Markdown original
- HTML raw permitido
- Tablas normalizadas automaticamente
- CSS dark theme para Markdown
- Sidebar sticky con scroll

StackRuby - Stack Overflow ligero, GPLv2
Funciona hasta en Emacs po!

Author: Qmaker-programmer

Gemfile

@@ -13,6 +13,9 @@ gem 'puma', '~> 6.0'
 gem 'sass-rails', '>= 6'
 # Use Active Model has_secure_password
 gem 'bcrypt', '~> 3.1.7'
+# Markdown parser
+gem 'kramdown', '~> 2.4'
+gem 'kramdown-parser-gfm', '~> 1.1'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -76,6 +76,10 @@ GEM
     i18n (1.14.8)
       concurrent-ruby (~> 1.0)
     io-console (0.8.2)
+    kramdown (2.5.2)
+      rexml (>= 3.4.4)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     listen (3.10.0)
       logger
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -149,6 +153,7 @@ GEM
       ffi (~> 1.0)
     reline (0.6.3)
       io-console (~> 0.5)
+    rexml (3.4.4)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
@@ -185,6 +190,8 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (~> 3.1.7)
   byebug
+  kramdown (~> 2.4)
+  kramdown-parser-gfm (~> 1.1)
   listen (~> 3.3)
   logger
   puma (~> 6.0)

app/controllers/comentarios_controller.rb

@@ -3,7 +3,7 @@ class ComentariosController < ApplicationController
 
   def create
     @preguntum = Preguntum.find(params[:preguntum_id])
-    @comentario = @preguntum.comentarios.new(cuerpo: params[:cuerpo])
+    @comentario = @preguntum.comentarios.new(cuerpo_markdown: params[:cuerpo_markdown])
     @comentario.usuario_id = usuario_actual.id
     @comentario.comentario_padre_id = params[:comentario_padre_id] if params[:comentario_padre_id].present?
 
@@ -20,7 +20,7 @@ def update
 
     # Seguridad: Solo el autor real puede editar su propio comentario no-fantasma
     if usuario_actual && @comentario.usuario_id == usuario_actual.id && !@comentario.fantasma?
-      if @comentario.update(cuerpo: params[:cuerpo])
+      if @comentario.update(cuerpo_markdown: params[:cuerpo_markdown])
         redirect_to @comentario.preguntum, notice: "¡Comentario actualizado!"
       else
         redirect_to @comentario.preguntum, alert: "Error al actualizar el comentario."

app/controllers/pregunta_controller.rb

@@ -45,7 +45,11 @@ def create
     @preguntum = Preguntum.new(preguntum_params)
     @preguntum.usuario_id = usuario_actual.id
 
-    if @preguntum.save
+    # Si presionó el botón de preview
+    if params[:preview]
+      @preview_html = markdown_to_html(@preguntum.cuerpo_markdown)
+      render :new, status: :unprocessable_entity
+    elsif @preguntum.save
       redirect_to @preguntum, notice: "Pregunta creada con éxito."
     else
       render :new, status: :unprocessable_entity
@@ -54,7 +58,12 @@ def create
 
   # PATCH/PUT /pregunta/1
   def update
-    if @preguntum.update(preguntum_params)
+    # Si presionó el botón de preview
+    if params[:preview]
+      @preguntum.assign_attributes(preguntum_params)
+      @preview_html = markdown_to_html(@preguntum.cuerpo_markdown)
+      render :edit, status: :unprocessable_entity
+    elsif @preguntum.update(preguntum_params)
       redirect_to @preguntum, notice: "Pregunta actualizada."
     else
       render :edit, status: :unprocessable_entity
@@ -133,6 +142,22 @@ def set_preguntum
   end
 
   def preguntum_params
-    params.require(:preguntum).permit(:titulo, :cuerpo)
+    params.require(:preguntum).permit(:titulo, :cuerpo_markdown)
+  end
+
+  def markdown_to_html(text)
+    return "" if text.blank?
+    require 'kramdown'
+
+    # Normalizar tablas
+    texto_normalizado = text.gsub(/\|[—–−]+\|/, '|---|')
+
+    options = {
+      input: 'GFM',
+      hard_wrap: true,
+      parse_block_html: true,
+      parse_span_html: true
+    }
+    Kramdown::Document.new(texto_normalizado, options).to_html.html_safe
   end
 end

app/helpers/markdown_helper.rb

@@ -0,0 +1,18 @@
+require 'kramdown'
+
+module MarkdownHelper
+  def markdown_to_html(text)
+    return "" if text.blank?
+
+    # Configuración de Kramdown
+    options = {
+      input: 'GFM',                    # GitHub Flavored Markdown
+      hard_wrap: true,                 # Saltos de línea reales
+      syntax_highlighter: nil,         # Sin resaltado (para mantener simple)
+      remove_block_html_tags: false,   # Permitir HTML
+      auto_ids: false                  # No generar IDs automáticos
+    }
+
+    Kramdown::Document.new(text, options).to_html.html_safe
+  end
+end

app/models/comentario.rb

@@ -5,7 +5,8 @@ class Comentario < ApplicationRecord
   belongs_to :padre, class_name: "Comentario", foreign_key: "comentario_padre_id", optional: true
   has_many :hijos, class_name: "Comentario", foreign_key: "comentario_padre_id", dependent: :destroy
 
-  validates :cuerpo, presence: true
+  validates :cuerpo_markdown, presence: true
+  before_save :procesar_markdown
 
   def eliminar_con_poda!
     # Procedemos con la bifurcación del algoritmo de poda
@@ -24,6 +25,21 @@ def fantasma?
 
   private
 
+  def procesar_markdown
+    if cuerpo_markdown_changed?
+      require 'kramdown'
+      options = {
+        input: 'GFM',
+        hard_wrap: true,
+        parse_block_html: true,
+        parse_span_html: true
+      }
+      self.cuerpo_html = Kramdown::Document.new(cuerpo_markdown, options).to_html
+      # Mantenemos 'cuerpo' sincronizado
+      self.cuerpo = cuerpo_markdown
+    end
+  end
+
   # Recolector en cascada reversa: Limpia padres fantasmas vacíos
   def recolector_fantasmas_reverso
     return unless padre.present?

app/models/preguntum.rb

@@ -8,8 +8,11 @@ class Preguntum < ApplicationRecord
   has_many :estrellas, dependent: :destroy
   has_many :usuarios_que_dieron_estrella, through: :estrellas, source: :usuario
 
-  validates :titulo, :cuerpo, presence: true
+  validates :titulo, presence: true
+  validates :cuerpo_markdown, presence: true
+
   before_create :inicializar_contadores
+  before_save :procesar_markdown
 
   # Método para contar cuántas estrellas tiene esta pregunta
   def total_estrellas
@@ -33,4 +36,23 @@ def inicializar_contadores
     self.votos ||= 0
     self.vistas ||= 0 if self.respond_to?(:vistas=)
   end
+
+  def procesar_markdown
+    if cuerpo_markdown_changed?
+      require 'kramdown'
+
+      # Normalizar tablas: reemplazar em-dash (—) y otros caracteres raros por guiones normales
+      texto_normalizado = cuerpo_markdown.gsub(/\|[—–−]+\|/, '|---|')
+
+      options = {
+        input: 'GFM',
+        hard_wrap: true,
+        parse_block_html: true,  # Parsea bloques HTML
+        parse_span_html: true     # Parsea HTML inline
+      }
+      self.cuerpo_html = Kramdown::Document.new(texto_normalizado, options).to_html
+      # Mantenemos 'cuerpo' sincronizado con el markdown por compatibilidad
+      self.cuerpo = cuerpo_markdown
+    end
+  end
 end

app/views/comentarios/_comentario.html.erb

@@ -13,15 +13,17 @@
     <% end %>
   </p>
 
-  <p style="margin: 6px 0; color: var(--text-principal); font-size: 0.95em; white-space: pre-line; <%= 'font-style: italic; color: var(--text-secundario);' if comentario.fantasma? %>"><%= comentario.cuerpo %></p>
+  <div style="margin: 6px 0; color: var(--text-principal); font-size: 0.95em; <%= 'font-style: italic; color: var(--text-secundario);' if comentario.fantasma? %>">
+    <%= (comentario.cuerpo_html || comentario.cuerpo).html_safe %>
+  </div>
 
   <div style="display: flex; gap: 12px; font-size: 0.8em; align-items: center;">
     <% unless comentario.fantasma? %>
       <details style="display: inline;">
         <summary style="cursor: pointer; color: var(--text-secundario); list-style: none;">Responder</summary>
         <%= form_with url: preguntum_comentarios_path(comentario.preguntum), local: true, style: "margin-top: 8px; min-width: 250px;" do |f| %>
           <%= hidden_field_tag :comentario_padre_id, comentario.id %>
-          <%= f.text_area :cuerpo, rows: 2, placeholder: "Escribe tu respuesta pública...", required: true, style: "margin-bottom: 8px;" %><br>
+          <%= f.text_area :cuerpo_markdown, rows: 2, placeholder: "Escribe tu respuesta (Markdown soportado)...", required: true, style: "margin-bottom: 8px;" %><br>
           <%= f.submit "Responder", style: "padding: 6px 12px; font-size: 0.85em;" %>
         <% end %>
       </details>
@@ -35,7 +37,7 @@
           <summary style="cursor: pointer; color: var(--accent); list-style: none;">Editar</summary>
           <%# SOLUCIÓN POLIMÓRFICA: Rails deduce la ruta automáticamente %>
           <%= form_with model: [comentario.preguntum, comentario], method: :patch, local: true, style: "margin-top: 8px; min-width: 250px;" do |f| %>
-            <%= f.text_area :cuerpo, value: comentario.cuerpo, rows: 2, required: true, style: "margin-bottom: 8px;" %><br>
+            <%= f.text_area :cuerpo_markdown, value: comentario.cuerpo_markdown || comentario.cuerpo, rows: 2, required: true, style: "margin-bottom: 8px;" %><br>
             <%= f.submit "Guardar Cambios", style: "padding: 6px 12px; font-size: 0.85em;" %>
           <% end %>
         </details>

app/views/layouts/application.html.erb

@@ -42,6 +42,29 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      /* Estilos para el scrollbar del sidebar */
+      .sidebar::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .sidebar::-webkit-scrollbar-track {
+        background: var(--bg-tarjeta);
+      }
+
+      .sidebar::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 4px;
+      }
+
+      .sidebar::-webkit-scrollbar-thumb:hover {
+        background: var(--text-secundario);
       }
 
       /* Contenedor principal que usa TODO el ancho restante */
@@ -153,6 +176,89 @@
         object-fit: cover;
         border: 2px solid var(--accent);
       }
+
+      /* Estilos para contenido Markdown renderizado */
+      h1, h2, h3, h4, h5, h6 {
+        margin-top: 1.2em;
+        margin-bottom: 0.6em;
+      }
+
+      code {
+        background: var(--bg-principal);
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Courier New', monospace;
+        font-size: 0.9em;
+        color: #f97583;
+      }
+
+      pre {
+        background: var(--bg-tarjeta);
+        padding: 12px;
+        border-radius: 6px;
+        overflow-x: auto;
+        border: 1px solid var(--border-color);
+        line-height: 1.2;
+      }
+
+      pre code {
+        background: none;
+        padding: 0;
+        color: var(--text-principal);
+        font-family: 'Courier New', 'Consolas', monospace;
+      }
+
+      blockquote {
+        border-left: 3px solid var(--accent);
+        padding-left: 15px;
+        margin-left: 0;
+        color: var(--text-secundario);
+        font-style: italic;
+      }
+
+      ul, ol {
+        padding-left: 25px;
+        line-height: 1.8;
+      }
+
+      strong {
+        color: white;
+        font-weight: bold;
+      }
+
+      em {
+        font-style: italic;
+        color: var(--accent);
+      }
+
+      /* Estilos para tablas Markdown */
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 20px 0;
+        background: var(--bg-tarjeta);
+        border: 1px solid var(--border-color);
+      }
+
+      th, td {
+        padding: 12px 15px;
+        text-align: left;
+        border: 1px solid var(--border-color);
+      }
+
+      th {
+        background: var(--bg-principal);
+        font-weight: bold;
+        color: white;
+      }
+
+      tr:nth-child(even) {
+        background: rgba(255, 255, 255, 0.02);
+      }
+
+      tr:hover {
+        background: rgba(88, 166, 255, 0.05);
+      }
     </style>
   </head>
 

app/views/pregunta/_form.html.erb

@@ -16,11 +16,24 @@
   </div>
 
   <div class="field" style="margin-bottom: 15px;">
-    <%= form.label :cuerpo, "Explica tu duda o problema con detalle", style: "display: block; margin-bottom: 5px; font-weight: bold;" %><br>
-    <%= form.text_area :cuerpo, rows: 6, placeholder: "Introduce el contexto, código de error y lo que has intentado..." %>
+    <%= form.label :cuerpo_markdown, "Explica tu duda o problema con detalle (Markdown soportado)", style: "display: block; margin-bottom: 5px; font-weight: bold;" %><br>
+    <%= form.text_area :cuerpo_markdown, rows: 10, placeholder: "Introduce el contexto, código de error y lo que has intentado...\n\nEjemplo:\n# Título\n**Negrita** *cursiva*\n```ruby\ncodigo\n```" %>
+    <p style="font-size: 0.85em; color: var(--text-secundario); margin-top: 5px;">
+      Puedes usar Markdown: **negrita**, *cursiva*, `codigo`, ```bloques de codigo```, # Títulos, listas, etc.
+    </p>
   </div>
 
-  <div class="actions">
-    <%= form.submit preguntum.new_record? ? "Publicar Pregunta" : "Guardar Cambios" %>
+  <% if defined?(@preview_html) && @preview_html.present? %>
+    <div style="margin-bottom: 20px; padding: 15px; background: var(--bg-principal); border: 1px solid var(--border-color); border-radius: 6px;">
+      <h3 style="margin-top: 0; color: var(--accent);">Vista Previa:</h3>
+      <div style="color: var(--text-principal); line-height: 1.6;">
+        <%= @preview_html %>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="actions" style="display: flex; gap: 10px;">
+    <%= form.submit "Preview", name: "preview", style: "background: var(--border-color); color: var(--text-principal);" %>
+    <%= form.submit preguntum.new_record? ? "Publicar Pregunta" : "Guardar Cambios", name: "commit" %>
   </div>
-<% end %>
+<% end %>