HTML

Генератор изображений кода HTML

Превращайте фрагменты HTML в изображения, которыми хочется делиться, не покидая Mac.

Скриншоты HTML почти всегда показывают структуру, поэтому отступы здесь значат больше, чем в большинстве языков.

Codeshot определяет HTML по вставленному коду, так что ошибиться с выбором языка невозможно. Вот один и тот же фрагмент в трёх из 30 встроенных тем, отрисованных стилями самого приложения.

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Atom One · тёмная

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

Edge · тёмная

<figure class="snapshot">
  <img src="/img/code.png" alt="A syntax highlighted snippet">
  <figcaption>
    Exported at <strong>2×</strong> from Codeshot
  </figcaption>
</figure>

GitHub · тёмная

Как выбрать тему для HTML

Держите вложенность достаточно мелкой, чтобы отступы читались с одного взгляда. Глубже трёх уровней картинка, скорее всего, уже не тот формат.

Как выбрать размер

Пусть размер следует за содержимым или зафиксируйте соотношение — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 или 3:4 — а затем экспортируйте в 1×, 2× или 3×, чтобы изображение оставалось чётким на retina-экране. Скопируйте его в буфер обмена сочетанием ⌘⇧C или сохраните через ⌘S.

Посмотрите все 30 тем рядом или прочитайте весь процесс.

Сделано для HTML и ещё 59 языков

Всё работает на вашем Mac. Код никогда его не покидает.

Скачать для macOS