Иногда, когда мы просматриваем блоги и технические посты, мы находим кого-то, кто делится таким кодом?
На самом деле это картинка.Хотя и говорится, что содержимое внутри нельзя скопировать, картинка в целом выглядит очень деликатно, не так ли? Три красных, желтых и зеленых кнопки в верхнем левом углу — это кнопки управления окнами на Mac, а выделенное соответствие цветов кода точно такое же, как и сопоставление цветов в нашей среде IDE, и в целом это стиль Mac.
Недавно некоторые друзья в группе спрашивали, как это делается, поэтому я познакомлю вас с этим здесь.
Этот инструмент называется carbon, у него есть собственный веб-сайт, репозиторий кода и аналогичный плагин VS Code, который будет представлен здесь.
Веб-сайт
Carbon самостоятельно поддерживает веб-сайт:carbon.now.sh/, мы можем открыть его, чтобы увидеть:
Вы можете видеть, что углерод предоставляет множество опций, таких как выбор темы, язык программирования и некоторые конфигурации цвета фона и интервалов.Ниже показан эффект предварительного просмотра кода, и мы также можем редактировать код здесь.
Мы можем вставить любой код ниже, например, вот фрагмент кода Python:
def get_vowels(string):
return [vowel for vowel in string if vowel in 'aeiou']
print("Vowels are:", get_vowels('This is some random string'))
Мы можем вставить его напрямую, а затем выбрать наш любимый цвет темы, язык и цвет фона.Мы также можем нажать кнопку настройки, чтобы настроить более подробный контент:
Оконные элементы управления здесь могут управлять реалистичным эффектом верхнего левого угла, например, имеет ли он эффект закругленного угла, имеет ли кнопка цвет, а также может управлять отступом, тенью и т. д., а также некоторой автоматической шириной. конфигурации регулировки.
После того, как вы закончите, нажмите «Копировать напрямую».Есть несколько вариантов, таких как копирование изображения, URL-адреса или непосредственное копирование iframe.
Например, щелкнув ссылку «Копировать как iframe», вы получите следующее:
<iframe
src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=material&wt=none&l=python&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=def%2520get_vowels%28string%29%253A%250A%2520%2520%2520%2520return%2520%255Bvowel%2520for%2520vowel%2520in%2520string%2520if%2520vowel%2520in%2520%27aeiou%27%255D%2520%250A%250Aprint%28%2522Vowels%2520are%253A%2522%252C%2520get_vowels%28%27This%2520is%2520some%2520random%2520string%27%29%29"
style="width: 561px; height: 146px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
Скопируйте как URL, и вы сразу получите готовый к использованию URL:
https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=material&wt=none&l=python&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=def%2520get_vowels%28string%29%253A%250A%2520%2520%2520%2520return%2520%255Bvowel%2520for%2520vowel%2520in%2520string%2520if%2520vowel%2520in%2520%27aeiou%27%255D%2520%250A%250Aprint%28%2522Vowels%2520are%253A%2522%252C%2520get_vowels%28%27This%2520is%2520some%2520random%2520string%27%29%29
После того, как у нас есть URL, мы можем обратиться к любому адресу.
Конечно, экспорт тоже есть, можно выбрать экспорт векторной графики в svg или png, как показано на рисунке:
Мои слова обычно кликают, чтобы скопировать, а затем используют мой инструмент ipic для загрузки в CDN.
склад
В то же время Carbon по-прежнему является открытым исходным кодом, а адрес репозитория GitHub:GitHub.com/углерод-приложение/…, на самом деле это исходный код сайта, который мы только что видели.Он разработан на основе Node.js.Давайте посмотрим на исходный код package.json:
"dependencies": {
"@next/bundle-analyzer": "^10.2.2",
"@reach/visually-hidden": "^0.15.0",
"actionsack": "^0.0.14",
"axios": "^0.21.1",
"cm-show-invisibles": "^3.1.0",
"codemirror": "5.61.1",
"codemirror-graphql": "^1.0.1",
"codemirror-mode-elixir": "^1.1.2",
"codemirror-solidity": "^0.2.3",
"date-fns": "^2.21.3",
"dom-to-image": "^2.6.0",
"downshift": "^6.1.3",
"dropperx": "^1.0.1",
"eitherx": "^1.0.2",
"email-validator": "^2.0.4",
"escape-goat": "^3.0.0",
"firebase": "^8.6.2",
"graphql": "^15.5.0",
"highlight.js": "^10.7.2",
"lodash.debounce": "^4.0.8",
"lodash.omitby": "^4.6.0",
"match-sorter": "^6.3.0",
"morphmorph": "^0.1.3",
"ms": "^2.1.3",
"next": "^10.2.2",
"next-offline": "^5.0.5",
"prettier": "^2.3.0",
"react": "^17.0.2",
"react-click-outside": "^3.0.0",
"react-codemirror2": "^7.2.1",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-image-crop": "^6.0.16",
"react-mailchimp-subscribe": "^2.1.3",
"tohash": "^1.0.2",
"use-climate-change-reminder": "^0.0.7"
},
Видно, что в основном он разрабатывается на базе Next, React и CodeMirror, если вы хотите делать вторичную разработку на основе этого, то можно, например, подключиться к облачному хранилищу, реализовать некоторую автоматизацию и так далее.
Если вы чувствуете, что веб-сайт, который только что был, может удовлетворить ваши потребности, вы можете продолжать использовать его прямо сейчас.
Плагин VS Code
Существует также аналогичный плагин VS Code, который также может выполнять аналогичные функции. Я думаю, что он весьма полезен. Плагин называется CodeSnap, и его скачали более 170 000 раз.
Вы можете просто искать и генерировать в VS Code.
Итак, как генерировать изображения кода?
На самом деле это очень просто, мы сначала выбираем код, которым хотим поделиться:
Затем выберите CodeSnap из контекстного меню, а затем вы можете создать соответствующий эффект предварительного просмотра кода на панели VS Code:
В это время мы можем нажать кнопку выше, чтобы напрямую загрузить изображение, соответствующее коду, как показано на рисунке:
Эффект, который вы получаете, такой же, как и в вашем собственном редакторе, разве это не приятно?
CodeSnap также может поддерживать изменение настроек в VSCode, в настоящее время поддерживает следующее:
codesnap.backgroundColor: The background color of the snippet's container. Can be any valid CSS color.
codesnap.boxShadow: The CSS box-shadow for the snippet. Can be any valid CSS box shadow.
codesnap.containerPadding: The padding for the snippet's container. Can be any valid CSS padding.
codesnap.roundedCorners: Boolean value to use rounded corners or square corners for the window.
codesnap.showWindowControls: Boolean value to show or hide OS X style window buttons.
codesnap.showWindowTitle: Boolean value to show or hide window title folder_name - file_name.
codesnap.showLineNumbers: Boolean value to show or hide line numbers.
codesnap.realLineNumbers: Boolean value to start from the real line number of the file instead of 1.
codesnap.transparentBackground: Boolean value to use a transparent background when taking the screenshot.
codesnap.target: Either container to take the screenshot with the container, or window to only take the window.
codesnap.shutterAction: Either save to save the screenshot into a file, or copy to copy the screenshot into the clipboard.
Для получения дополнительной информации вы можете перейти непосредственно на домашнюю страницу плагина CodeSnap:marketplace.visual studio.com/items?item N…
Кроме того, я также упоминаю здесь свою тему VS Code.Я использую плагин Community Material Theme:
Затем используйте первую тему по умолчанию, которую он предоставляет:
Если вы думаете, что это хорошо, вы можете попробовать ~
Я надеюсь, что все должны помочь.
Для более интересного контента, пожалуйста, обратите внимание на мои публичные аккаунты «Coder of Attack» и «Cui Qingcai丨Jing Mi».