extensões do Google Chrome para permitir a alteração da fonte do texto selecionado

Question

Eu tenho procurado por um pequeno inconveniente experimentado ao ler alguns blogs de programação que postam o código fonte dentro dos artigos na mesma fonte que o texto normal. A única exceção a esse problema é quando o artigo inteiro está usando uma fonte monoespaçada.

Captura de tela cortada de um artigo do blog de programação:

EncontreialgumalíviovisualizandooartigopelocachedaWebdoGooglenomodosomentetextoeelemostraoartigoemumafontemonoespaçada,poisjátenhoafontepadrãodonavegadordefinidacomoumafontemonoespaçada.

Oqueeurealmenteprefiroéacapacidadedeselecionarocódigo-fontedoartigodaWebealterarafontepormeiodeumaextensão,assimcomoemumprogramadeprocessadordetexto.

AousaroInspectelementdoGoogleChrome,altero:

<span class="code"> <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p> </span>

para:

<span class="code" style="font-family:monospaced;">
    <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p>
</span>

se for uma seção enorme de código. Mas repetir o que precede é um pouco difícil se houver vários fragmentos de código no artigo, e eu não achar viável. Eu tentei muito em busca de extensões do navegador Chrome que permitissem ao usuário selecionar algum texto e alterar sua fonte, sem sorte.

Você conhece essa extensão ou uma solução alternativa / mais fácil? Desde já, obrigado.

P.S. Não sei muito sobre o desenvolvimento de extensões de navegador para o Chrome e também se o navegador expõe essa funcionalidade. No meu tempo livre, gostaria de explorar essa rota também. Pode se tornar uma boa oportunidade para me apresentar às extensões de programação. Enquanto isso, quaisquer novas ideias / pensamentos da comunidade serão muito apreciados.

Editar # 1: Estou procurando uma solução que permita alterar a fonte sem precisar recarregar a página. Como pode haver casos em que o conteúdo pode mudar após uma atualização de página. A visualização do código-fonte em blogs de programação é apenas um cenário que encontro com mais frequência. Por exemplo, um artigo da Web pode conter algum design de arte ASCII, mas o autor original é apresentado na fonte principal de largura variável do artigo. Eu sei disso, eu poderia simplesmente copiar a parte de arte ASCII (ou até mesmo o código-fonte em um blog de programação) e visualizá-lo em um bloco de notas. Estou começando a me perguntar se estou apenas me preocupando demais com um requisito trivial.

    

Answer 1

Com base na sugestão de MarcusJ em um comentário na resposta , tentei o Extensão elegante para o Chrome. Ele fez o trabalho. É necessário que eu digite manualmente o código CSS e atribua um padrão de correspondência de URL. Porém, achei a extensão Stylebot mais conveniente de usar. Stylebot fornece uma interface fácil de usar para selecionar o elemento HTML e para fazer mudanças de estilo. Stylebot aplica a regra de estilo a todas as páginas desse subdomínio. Eu gostei do fato de que Stylebot faz o trabalho por trás dos bastidores para você.

    

Answer 2

Por que você não usa apenas o Custom.css do Google, ele está na pasta "padrão" > Folhas de estilo do usuário > Custom.css.

O arquivo custom.css do Google substituirá qualquer CSS em uma página da Web e permite que você especifique qualquer coisa com CSS.