Seletor de Tema do Codeblock

:discourse2: Resumo Codeblock Theme Picker permitirá que você altere facilmente o tema usado nos blocos de código.
:eyeglasses: Pré-visualização Pré-visualizar no Discourse Theme Creator
:hammer_and_wrench: Link do Repositório https://github.com/discourse/hljs-theme-picker
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Recursos

Esta é apenas uma pequena parte das opções disponíveis. Este componente inclui todas as 90 opções oferecidas no repositório hljs.

:information_source: Embora todas as opções estejam incluídas neste componente, apenas a que você escolher será carregada. Portanto, não há sobrecarga.

Como usar

Devido à forma como este componente está configurado, será necessária uma pequena alteração em uma das configurações do seu site.

  1. Acesse your.site.com/admin/site_settings/
  2. Pesquise por theme_authorized_extensions
  3. Adicione css à lista.

Assim:

:warning: Você deve fazer isso antes de instalar o componente, caso contrário, ele não funcionará.

Depois disso, você pode instalar o componente como qualquer outro.

Configurações

Nome Descrição
hljs theme Selecione o tema que deseja que os blocos de código utilizem. Você pode visitar a página de demonstração do hljs para pré-visualizar os temas
hljs dark match Carregar esquema de cores escuro, se disponível

Se precisar ver como as opções se parecem, dê uma olhada aqui: We're not a CDN - highlight.js

Depois de decidir qual tema hljs usar, você pode pesquisar no menu suspenso o que deseja e salvar a configuração. Será necessário atualizar a página para que tudo comece a funcionar.

Créditos

Todos os temas hljs incluídos neste componente possuem informações de direitos autorais em seus respectivos arquivos. A lista de todos esses autores (:heart:) é grande demais para ser incluída aqui, mas você pode vê-los aqui.


:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

42 curtidas

This theme is very useful and running in my site for a long time. How ever I suddenly found it has a problem on firefox. The custom css file blocked by the following header X-Content-Type-Options: nosniff. Console shows that css file MIME type is text/html. No matter which theme I choise the problem still happen on firefox but chrome is fine.

This super theme component would be even better if the selected codeblock style was also selectable as a user preference.

5 curtidas

Segundo. Como preferência do usuário seria muito legal.

Alguma maneira de mostrar os números das linhas?

Ótimo componente de tema.

Uma pergunta: há 242 temas na demonstração do highlight.js. Por exemplo, “Github Dark Dimmed”, conforme imagem em anexo.

Existe alguma maneira de resolver esse problema? Obrigado pelas orientações.

Infelizmente, isso é um pouco complexo.

O Discourse executa a versão 10.6.0 do highlight-js. A maioria dos temas extras que estão faltando agora (base16) exige a versão 11.0.

O problema é que essa versão introduz algumas alterações quebradas e depreciadas. Dê uma olhada aqui:

Portanto, isso significa que as opções atuais permanecerão as mesmas por um tempo. Primeiro, a versão do highlight-js precisa ser atualizada em tests-passed no Discourse. Depois, precisaremos aguardar uma versão estável. Atualizar os temas (mesmo os atuais) nos colocaria em uma situação ruim, onde seria um palpite se o tema funcionaria corretamente no seu site ou não.

4 curtidas

Este componente parece estar com defeito nas últimas versões beta - o destaque não funciona mais corretamente quando ele está instalado. Removi o componente dos temas e ele voltou a funcionar - eu apenas não consigo escolher o tema de destaque.

2 curtidas

confirme que a realce de sintaxe também está quebrado aqui na versão beta mais recente

@Falco acabou de mesclar uma correção para este componente: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Ele inclui uma atualização para os temas da versão 11 do highlight.js (o core também foi atualizado para a versão 11 do highlight.js) e correções para estilos que não possuíam a especificidade correta.

2 curtidas

Recebi este erro ao tentar instalar o componente

Erro ao criar ativo de upload: a11y-dark. Nome original do arquivo Desculpe, o arquivo que você está tentando carregar não está autorizado (extensões autorizadas: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Você fez esta parte :point_down:

1 curtida

Ah não, vou fazer isso :hugs:

1 curtida

Acabei de encontrar este componente de tema — ainda bem que ele existe! Notei que a configuração hljs dark match não parece funcionar.

Por exemplo, temos hljs theme definido como atom-one-light (para o qual também existe atom-one-dark).

Ao atualizar, o atom-one-light é aplicado enquanto no modo escuro, mas o bloco de código não muda para escuro ao mudar para o modo escuro — ele permanece claro.


Recebi esta mensagem de erro ao instalar componentes de tema, espero que alguém possa orientar a comunidade sobre como corrigi-los.

Você adicionou css à lista de extensões de tema permitidas?

1 curtida

Obrigado, funcionou ^^

1 curtida

Nota:

Deveria ser:

Parece que este componente de tema está quebrado na versão mais recente.

Eu já adicionei css à configuração theme_authorized_extensions e tentei reinstalar o componente, mas os estilos de bloco de código ainda não estão sendo aplicados.

Você poderia verificar isso? Obrigado.