Demonstre seu código nesses sites

CodePen

No CodePen, você pode demonstrar seu código no que chamamos de Pens .

Uma caneta pode consistir em HTML, CSS e JS. O CodePen tem muitos recursos que facilitam a exibição do seu código. Por exemplo, ele suporta a sintaxe Sass e Less e a opção de “adicionar rapidamente” bibliotecas JS populares como jQuery e Angular.

Confira as canetas populares do site para se inspirar.

Tecido vivo

Liveweave é um excelente editor de código fonte online. É também, de acordo com o site, o playground definitivo para web designers e desenvolvedores, e uma ótima ferramenta para testar, praticar e compartilhar suas criações. O que eu gosto no Liveweave é como é simples adicionar uma dependência de terceiros à sua demonstração.

Você pode adicionar Bootstrap, jQuery ou outros pacotes populares de desenvolvimento web em dois cliques.

brincar

Essa plataforma de demonstração de código se inclina um pouco mais para CSS, mas possui recursos de HTML e JavaScript. Um toque agradável é que ele usa a biblioteca JS -prefix-free por padrão, o que significa que você não precisa se preocupar com prefixo de fornecedor em suas propriedades CSS.

JS Fiddle

O JS Fiddle tem muitos recursos para suas demonstrações de código JavaScript. Possui várias versões de bibliotecas de desenvolvimento, como jQuery, MooTools e React. Possui uma implementação da ferramenta de análise de código JSHint embutida em sua interface.

O JS Fiddle ainda permite simular solicitações Ajax usando sua API Echo.

<kodtest/>

Um destaque deste aplicativo de demonstração de código é sua capacidade de dimensionar sua visualização ao vivo para as dimensões de dispositivos móveis e outros tamanhos de tela comuns. Esse recurso pode ajudá-lo a depurar seus pontos de interrupção responsivos.

Plunker

Plunker é uma comunidade online para criar, colaborar e compartilhar suas ideias de desenvolvimento web. Seu editor de código é rico em recursos. O editor de código tem: transmissão ao vivo para que as pessoas possam assistir você codificar em tempo real, bifurcação de código, pilhas/modelos de desenvolvimento contribuídos pelo usuário, uma interface de linting de código integrada e muito mais. Veja as demos mais vistas no Plunker.

CSSDeck

CSSDeck tem uma interface de usuário limpa. Se você está procurando uma ferramenta simples para exibir seu código-fonte, este é um bom candidato. As pessoas que visualizarem sua demonstração de código podem deixar comentários, mas, para isso, devem registrar uma conta ou fazer login com sua conta do GitHub.

code,reload,com

Esta é outra ferramenta simples para exibir seu código. Tem muitas bibliotecas JS disponíveis à sua disposição. jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto e muito mais.

Ideone

Essa ferramenta simples de compartilhamento de código permite que você demonstre seu código do lado do servidor (PHP, Perl e assim por diante). Ele lida com linguagens de programação de software como C++ também. Quando você executa seu código, o Ideone mostrará a você (e seus revisores de código) a saída do seu código.

Ele também exibirá os erros de compilação que encontrar.