Tagghost

Como adicionar colorização de sintaxe no Ghost

PRISM.JS

A biblioteca que nós utilizaremos para fazer a colorização de sintaxe, vamos utilizar o Prism.JS, que além de ser muito bom, como diz o site, é “super rápido”. E tem um bom conjunto de temas pré-definidos e alguns plugins úteis, para que ele possa atender às suas necessidades.

var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'

Como instalar o Prism.JS

Instalar o Prism.JS é muito fácil:

  • Primeiro você precisa fazer o download clicando aqui
  • Após selecionar as opções que você acha que vai atender às suas necessidades, faça o download dos arquivos de script(js) e estilo(css) gerados.
  • Coloque os arquivos nas pastas assets/css e assets/js adequadas, no tema que você estiver utilizando – o conteúdo content/themes/tema/assets/js/prism.js e content/themes/tema/assets/css/prism.css
  • Agora é só adicionarmos esses arquivos em seu layout.

Para fazer isso, abra o arquivo content/themes/theme-name/default.hbs e adicione a tag <link> no head para o css.

...
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  
...

e a tag <script>antes da tag </body>

...
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>  

Pronto

Isso foi fácil. Agora você está pronto para começar a usar a colorização de sintaxe utilizando os recursos fornecidos pelo Prism.JS. O modo como funciona é procurando por um elemento <code class="language-*"></code>, ou no ghost, “`language-javascript em seu código. Então você só precisa adicionar a classe adequada para o seu bloco de código, assim:

```language-javascript
var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'
// é necessário colocar ``` para finalizar a marcação do bloco de código

E aqui está como o código é renderizado.

var str = 'rb.ite.saidrelda.golb//:ptth';  
[].map.call(str, function(x) {
  return x;
}).reverse().join(''); 
// Saída: 'http://blog.adlerdias.eti.br'

Como Instalar a Plataforma de Blog Ghost no Ubuntu

Depois de mudar meu blog da kinghost para a DigitalOcean, eu resolvi mudar também a plataforma que eu utilizava para as postagens. Então, resolvi mudar do wordpress para o Ghost.

Primeiro, vamos verificar a configuração do mysql.

Verificando MySql

Antes de criarmos os bancos, é importante verficarmos se nossa instalação do MySql está utilizando utf8. No arquivo /etc/mysql/my.cnf verifique se a ele possui as linhas character_set_server e collation_server.

[mysqld]
[....]
character_set_server = utf8  
collation_server = utf8_general_ci  
[....]

Feito isso, podemos prosseguir para a instalação propriamente dita, e para tal vamos criar os bancos de dados e um usuário para o ghost.

Criando usuário e bancos de dados

$ mysql -u root -p

No prompt de comando mysql> vamos utilizar os seguintes comandos. Certifique-se de trocar “SUA_SENHA” com sua própria
senha, afinal, essa vai ser a senha do seu banco de dados que utilizaremos para o Ghost.
Vamos criar dois bancos de dados, um ghost e um ghostdev, um para produção e outro para desenvolvimento, respectivamente.
Criaremos um usuário ghost que terá acesso aos bancos, lembre-se de substituir @’localhost’ por @’%’, caso você deseje ter acesso remoto à esses bancos.
Atribuiremos privilégios para que os usuários possam acessar os bancos.

create database ghostdev;  
create database ghost;  
create user 'ghost'@'localhost' identified by 'SUA_SENHA';  
grant all privileges on ghost.* to 'ghost'@'localhost';  
grant all privileges on ghostdev.* to 'ghost'@'localhost';  
flush privileges;  
quit  

Instalando o Nodejs

$ sudo apt-get install npm nodejs

Instalando o Ghost

Primeiro, vamos entrar na pasta, criar a pasta blog

$ mkdir /var/www/blog/
$ cd /var/www/blog/

Agora, vamos baixar o ghost utilizando o curl.

$ curl -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip

Vamos descompactar o arquivo.

$ unzip -uo ghost.zip -d .
$ cd ghost

Instalaremos o Node.js no Ghost. Você também vai querer o módulo para MySQL, para que a nossa instalação do Ghost utilize o banco de dados que criamos anteriormente.

$ npm install --production
$ npm install mysql

Modifique os config.js em seu Ghost. Altere a url nas sessões de desenvolvimento e produção para o endereço do seu blog.

development: {  
    // The url to use when providing links to the site, E.g. in RSS and email.
    url: 'http://blog.adlerdias.eti.br',

e

production: {  
    url: 'http://blog.adlerdias.eti.br',

Em seguida, colocaremos as configurações do banco de dados de produção e desenvolvimento, substituindo as versões SQLite padrão, tanto em desenvolvimento e produção:

database: {  
    client: 'mysql',
    connection: {
        host: 'localhost',
        user: 'ghost',
        password: 'SUA_SENHA',
        database: 'ghostdev',
        charset: 'utf8'
    }
},

e, para Produção:

database: {  
    client: 'mysql',
    connection: {
        host: 'localhost',
        user: 'ghost',
        password: 'SUA_SENHA',
        database: 'ghost',
        charset: 'utf8'
    }
},

Para finalizar, vamos instalar e iniciar o Ghost.

$ npm install --production
$ npm start

Em um navegador, navegue até a url 127.0.0.1:2368 para ver o seu Blog.

© 2017 Adler Dias

Theme by Anders NorénUp ↑