coding fonts

Кодирующие шрифты

Микросайт, который демонстрирует шрифты, предназначенные для написания кода.

https://coding-fonts.css-tricks.com/

Запуск этого сайта.

• Установить зависимости: npm install
• Начальный сервер: npm run dev

Добавление шрифта

• Start Server (см. Выше)
• Если шрифт является открытым исходным кодом, поместите копию шрифта в папке fonts . По крайней мере, файл .woff2 в папке имени шрифтов. Eg /src/assets/fonts/NewFont/NewFont.woff2
• Сделайте таблицу стилей, которая подготовит эту шрифту в этой папке. Eg /src/assets/fonts/NewFont/NewFont.css
• Добавьте файл, такой как new-font.md to /src/fonts . Добавьте информацию шрифта. Отметьте URL -адрес стили -таблицы с предыдущего шага в поле stylesheet_url , относительно /src/assets/fonts/ . Если URL абсолютный, т.е. не добавлен в репо, добавьте stylesheet_absolute: true поле. Смотрите это в качестве примера.
• Чтобы предварительно просмотреть, что будет снимком экрана, структура URL похожа: http: // localhost: 8080/code_samples/html/? Font = anonymous-pro & theme = Dark, где шрифт соответствует Title Kebab-Case файла Markdown.
• Сделайте скриншоты! Это только местный процесс. Следуйте инструкциям по снимкам экрана в командной строке.
• Сделайте запрос на это. Вы должны увидеть встроенный предварительный просмотр NetLify как часть PR.

Делая скриншоты

Вы можете сделать снимки экрана, используя прилагаемый файл takeScreenshots.js . Параметры перечислены на экране справки ниже.

 Options:
  --version    Show version number
  -f, --font   Font to use for screenshots
  -l, --lang   Code sample to use for screenshot
  -t, --theme  Theme to use for screenshots
  --parallel   Run the screenshots in parallel
  -h, --help   Show help

--font , --lang и --theme все принимают ключевое слово «все» для выполнения съемки экрана всех их соответствующих точек данных.

Флаг --parallel флаг позволяет управлять кукловодом параллельно, что полезно, если вам нужно многократно делать скриншоты шрифта. Обратите внимание, что это породит столько экземпляров кукловода, сколько у вас есть общие перестановки, которые вы запрашиваете. Возьмите следующую команду, например.

 node takeScreenshots.js -f source-code-pro -l all -t all

Он вызовет 8 экземпляров кукловода (1 шрифт * 4 языков * 2 темы = 8 экземпляров) все сразу, чтобы сделать скриншоты. Обычно это хорошо и не приводит к каким -либо проблемам, но в случае, если вы должны сделать это и для всех шрифтов, вы вызовите сотни случаев, которые почти всегда будут в неудаче.

Дополнительные примеры

 # Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.
node takeScreenshots.js -f source-code-pro -l js -t dark

# Take a screenshot of the Menlo font, using all of the code samples, and the light theme.
node takeScreenshots.js -f menlo -l all -t light

# Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.
node takeScreenshots.js -f all -l all -t all

# Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel
node takeScreenshots.js -f input -l all -t all --parallel