Se você utiliza o WordPress, já deve saber quão útil são as customizações que dá pra fazer em um tema. Talvez esse seja um ponto importante e que faz com que uma boa fatia do mercado escolha esse sistema de gestão de conteúdo para internet.
Primeiro, é bastante indicado que você já conheça um pouco de HTML, CSS e PHP para realizar qualquer tipo de customização em seu site. Nesta postagem, você vai ver como é simples adicionar um estilo para exibir códigos sem usar qualquer plugin.
Para exibir código nas postagens com um estilo legal, tipo o tema Dracula, basta baixar e inserir os arquivos (css e javascript) do tema Dracula para Prism.js em seu tema WordPress (atenção apenas ao caminho correto e às permissões de acesso ao arquivo). Após isso, insira os seguintes trechos de código no arquivo functions.php do seu tema:
function meutema_scripts_function() {
wp_enqueue_script( 'prism', get_template_directory_uri() . '/js/prism.min.js');
}
add_action('wp_enqueue_scripts','meutema_scripts_function');function meutema_enqueue_styles(){
wp_enqueue_style('prism',
get_template_directory_uri().'/css/prism.css');
}Em teoria, já deve estar funcionando perfeitamente! Para testar, adicione a uma postagem um bloco do tipo código, jogue um trecho de código nele e insira a seguinte classe CSS adicional (opção disponível em “Avançada” no bloco lateral) language-X, onde X pode ser javascript, php, css, html…
Veja a Figura 1 e alguns exemplos logo após.
var myObject = {
property1: "something",
property2: 5,
property3: true
};
<?php
echo "something";
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>something
<style>
@media print {
p { color: red !important; }
}
</style>
</head>
<body>
<h1>something
<script>
if (true) {
console.log('something');
}
</script>
</body>
</html>Gostou? Veja mais em:
– https://draculatheme.com/prism/
– https://crambler.com/how-to-implement-prism-js-syntax-highlighting-into-your-wordpress-site/