Saltar al contenido principal

% 16k.es

Añadiendo resaltado de sintaxis en Ghost

/adding-syntax-highlighting-to-ghost-blog-posts/ /me

Cómo añadir color al código de las entradas de blog en Ghost

ghost

code picture

La próxima vez que quieras añadir color a tu código en entradas de blog fantasma haz esto:

  1. Ve a https://cdnjs.com/libraries/prism.
  2. Ghost settings -> Code Injection

Ghost code injection

  1. No estoy seguro de si es realmente relevante pero copia esto de la página de prisma en los encabezados:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.css" />
  1. …y añade el lenguaje que quieras al pie:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-python.min.js" integrity="sha256-z1w1HLignub5kA0f24TCzv765MT4114LEgW/oIYuLag=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-bash.min.js" integrity="sha256-aGuBnrEzXZQ2RDCdqqyCzGXLeJzXRU0kJx8KoUTFPYs=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-css.min.js" integrity="sha256-4ut/7XCv/zjtcNF9GlQL+Jpy3AuQlLt2ExXNtIjZ8Po=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-javascript.min.js" integrity="sha256-g87nhVlyWjKmsk1hSfvqjr22ILWlzX/0LtHFXkLB6IU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-markdown.min.js" integrity="sha256-LVbOCHxYsNr9pF5KGdB2NphtO2FKM92SGFxRkWc9Ovg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-go.min.js" integrity="sha256-Og32rFEm2ICsLGNCdEf+nUE/QDhI4nxQ2SLHXD4Yv90=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-powershell.min.js" integrity="sha256-WqpEa6OsJule/vRjgts5OUXn1decJ74Kxq4WdMCfTTc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-shell-session.min.js" integrity="sha256-AA80TzgLh7tiMCgr55/1mQEG07qTSZYBE/yp8FF4hLQ=" crossorigin="anonymous"></script>