Cómo añadir syntax highlighting real en tus tickets de Jira

Si alguna vez has intentado pegar un bloque de código en un ticket de Jira y te ha salido texto plano sin colores, esto es para ti.

El problema con el editor de Jira

El editor nativo de Jira (basado en ProseMirror bajo el ecosistema Atlassian) soporta bloques de código con el macro /code, pero su syntax highlighting es básico: detecta el lenguaje, aplica un esquema de colores fijo y no permite personalización.

Para equipos de desarrollo que adjuntan fragmentos de TypeScript, Python, YAML o HCL, esto se convierte en un fricción real.

La solución: Atlassian Forge + Custom UI

Con Atlassian Forge podemos inyectar un Custom UI panel en el issue view y renderizar cualquier librería de highlighting. La clave es el módulo jira:issuePanel.

typescript
// forge/src/index.tsx
import ForgeUI, { render, IssuePanel, useProductContext } from '@forge/ui';
import { useState } from '@forge/ui';

const App = () => {
  const context = useProductContext();
  const [code, setCode] = useState('');

  return (
    <IssuePanel>
      <CodeEditor
        value={code}
        language="typescript"
        onChange={setCode}
      />
    </IssuePanel>
  );
};

export const run = render(<App />);

Pasando el bloque al issue

Una vez el usuario escribe su snippet, usamos la API de Jira REST para guardar el contenido formateado en el campo description usando el formato Atlassian Document Format (ADF):

typescript
import api, { route } from '@forge/api';

async function saveCodeBlock(issueKey: string, code: string, lang: string) {
  const adfPayload = {
    version: 1,
    type: 'doc',
    content: [
      {
        type: 'codeBlock',
        attrs: { language: lang },
        content: [{ type: 'text', text: code }],
      },
    ],
  };

  await api.asUser().requestJira(
    route`/rest/api/3/issue/${issueKey}`,
    {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ fields: { description: adfPayload } }),
    }
  );
}

Resultado

Con este approach obtienes:

• ✅ Highlighting real con temas personalizables (GitHub Dark, Dracula, etc.)
• ✅ El código se guarda en el issue como ADF nativo
• ✅ Compatible con la API de búsqueda de Jira
• ✅ Sin permisos adicionales de administrador

En próximos artículos veremos cómo añadir line numbers, diff mode y copiar al portapapeles con un solo clic.

---

¿Quieres probar QuipuCode antes que nadie? Apúntate a la lista de espera.