Repository: carbon-app/carbon Branch: main Commit: 1334429ae63f Files: 148 Total size: 1.3 MB Directory structure: gitextract_k_ip4zh3/ ├── .all-contributorsrc ├── .eslintrc.js ├── .github/ │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ ├── feature_request.md │ │ └── other.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── dependabot.yml │ ├── ranger.yml │ └── workflows/ │ └── validate.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── .vercelignore ├── LICENSE ├── README.md ├── SECURITY.md ├── bin/ │ └── deploy.sh ├── components/ │ ├── Announcement.js │ ├── ApiContext.js │ ├── AuthContext.js │ ├── BackgroundSelect.js │ ├── Billing.js │ ├── Button.js │ ├── Carbon.js │ ├── ColorPicker.js │ ├── ConfirmButton.js │ ├── CopyMenu.js │ ├── Dropdown.js │ ├── Editor.js │ ├── EditorContainer.js │ ├── ExportMenu.js │ ├── FontFace.js │ ├── FontSelect.js │ ├── Footer.js │ ├── Header.js │ ├── ImagePicker.js │ ├── Input.js │ ├── ListSetting.js │ ├── LoginButton.js │ ├── MenuButton.js │ ├── Meta.js │ ├── Overlay.js │ ├── Page.js │ ├── PhotoCredit.js │ ├── Popout.js │ ├── Presets.js │ ├── RandomImage.js │ ├── ReferralLink.js │ ├── SelectionEditor.js │ ├── Settings.js │ ├── ShareMenu.js │ ├── Slider.js │ ├── SnippetToolbar.js │ ├── Spinner.js │ ├── ThemeSelect.js │ ├── Themes/ │ │ ├── GlobalHighlights.js │ │ ├── ThemeCreate.js │ │ └── index.js │ ├── Toasts.js │ ├── Toggle.js │ ├── Toolbar.js │ ├── WidthHandler.js │ ├── WindowControls.js │ ├── WindowPointer.js │ ├── hooks.js │ ├── style/ │ │ ├── Font.js │ │ ├── Reset.js │ │ └── Typography.js │ └── svg/ │ ├── Arrows.js │ ├── Checkmark.js │ ├── Controls.js │ ├── Copy.js │ ├── Language.js │ ├── Logo.js │ ├── Remove.js │ ├── Settings.js │ ├── Theme.js │ ├── Watermark.js │ └── WindowThemes.js ├── cypress/ │ ├── config.json │ ├── integration/ │ │ ├── background-color.spec.js │ │ ├── basic.spec.js │ │ ├── embed.spec.js │ │ ├── gist.spec.js │ │ ├── localStorage.spec.js │ │ ├── security.spec.js │ │ └── visual-testing.spec.js │ ├── plugins/ │ │ └── index.js │ ├── support/ │ │ └── index.js │ └── util.js ├── docs/ │ ├── README.ar.md │ ├── README.bn.md │ ├── README.br.pt.md │ ├── README.cn.zh.md │ ├── README.de.md │ ├── README.es.md │ ├── README.fa.md │ ├── README.fr.md │ ├── README.he.md │ ├── README.hi.md │ ├── README.in.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.kr.md │ ├── README.ml.md │ ├── README.nl.md │ ├── README.pl.md │ ├── README.ru.md │ ├── README.se.md │ ├── README.ta.md │ ├── README.tr.md │ ├── README.tw.zh.md │ ├── README.ua.md │ └── README.uz.md ├── lib/ │ ├── api.js │ ├── client.js │ ├── constants.js │ ├── custom/ │ │ ├── autoCloseBrackets.js │ │ └── modes/ │ │ ├── apache.js │ │ ├── elixir.js │ │ ├── graphql.js │ │ ├── nim.js │ │ ├── riscv.js │ │ └── solidity.js │ ├── dom-to-image.js │ ├── highlight-languages.js │ ├── routing.js │ └── util.js ├── next.config.js ├── package.json ├── pages/ │ ├── [id].js │ ├── _document.js │ ├── about.js │ ├── account.js │ ├── api/ │ │ ├── image/ │ │ │ └── [id].js │ │ └── oembed.js │ ├── embed/ │ │ ├── [id].js │ │ └── index.js │ ├── index.js │ └── snippets.js ├── public/ │ ├── manifest.json │ ├── robots.txt │ └── static/ │ └── react-crop.css ├── release.js └── vercel.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .all-contributorsrc ================================================ { "projectName": "carbon", "projectOwner": "carbon-app", "files": [ "README.md", "docs/README.ar.md", "docs/README.bn.md", "docs/README.br.pt.md", "docs/README.cn.zh.md", "docs/README.de.md", "docs/README.es.md", "docs/README.fr.md", "docs/README.he.md", "docs/README.hi.md", "docs/README.in.md", "docs/README.it.md", "docs/README.ja.md", "docs/README.kr.md", "docs/README.ml.md", "docs/README.nl.md", "docs/README.pl.md", "docs/README.ru.md", "docs/README.se.md", "docs/README.ta.md", "docs/README.tr.md", "docs/README.tw.zh.md", "docs/README.ua.md", "docs/README.uz.md" ], "imageSize": 100, "commit": false, "contributors": [ { "login": "briandennis", "name": "briandennis", "avatar_url": "https://avatars0.githubusercontent.com/u/10078572?v=4", "profile": "https://github.com/briandennis", "contributions": [ "code", "doc", "infra", "review" ] }, { "login": "mfix22", "name": "mfix22", "avatar_url": "https://avatars0.githubusercontent.com/u/8397708?v=4", "profile": "https://github.com/mfix22", "contributions": [ "question", "code", "ideas" ] }, { "login": "jakedex", "name": "jakedex", "avatar_url": "https://avatars1.githubusercontent.com/u/10369094?v=4", "profile": "https://github.com/jakedex", "contributions": [ "question", "code", "design", "video" ] }, { "login": "andrewda", "name": "andrewda", "avatar_url": "https://avatars1.githubusercontent.com/u/10191084?v=4", "profile": "https://github.com/andrewda", "contributions": [ "question", "code", "bug", "review" ] }, { "login": "yeskunall", "name": "yeskunall", "avatar_url": "https://avatars2.githubusercontent.com/u/14703164?v=4", "profile": "https://github.com/yeskunall", "contributions": [ "code", "doc", "tool", "bug" ] }, { "login": "stoshfabricius", "name": "stoshfabricius", "avatar_url": "https://avatars1.githubusercontent.com/u/2652676?v=4", "profile": "https://github.com/stoshfabricius", "contributions": [ "code" ] }, { "login": "jkling38", "name": "jkling38", "avatar_url": "https://avatars1.githubusercontent.com/u/11639896?v=4", "profile": "https://github.com/jkling38", "contributions": [ "doc" ] }, { "login": "otobrglez", "name": "otobrglez", "avatar_url": "https://avatars1.githubusercontent.com/u/225946?v=4", "profile": "https://github.com/otobrglez", "contributions": [ "code" ] }, { "login": "darahak", "name": "darahak", "avatar_url": "https://avatars3.githubusercontent.com/u/11488612?v=4", "profile": "https://github.com/darahak", "contributions": [ "doc" ] }, { "login": "dom96", "name": "dom96", "avatar_url": "https://avatars0.githubusercontent.com/u/246651?v=4", "profile": "https://github.com/dom96", "contributions": [ "code" ] }, { "login": "elrumordelaluz", "name": "elrumordelaluz", "avatar_url": "https://avatars3.githubusercontent.com/u/784056?v=4", "profile": "https://github.com/elrumordelaluz", "contributions": [ "code" ] }, { "login": "cjb", "name": "cjb", "avatar_url": "https://avatars2.githubusercontent.com/u/21217?v=4", "profile": "https://github.com/cjb", "contributions": [ "code" ] }, { "login": "Krzysztof-Cieslak", "name": "Krzysztof-Cieslak", "avatar_url": "https://avatars1.githubusercontent.com/u/5427083?v=4", "profile": "https://github.com/Krzysztof-Cieslak", "contributions": [ "code" ] }, { "login": "fernahh", "name": "fernahh", "avatar_url": "https://avatars0.githubusercontent.com/u/2369851?v=4", "profile": "https://github.com/fernahh", "contributions": [ "doc" ] }, { "login": "g3r4n", "name": "g3r4n", "avatar_url": "https://avatars1.githubusercontent.com/u/10941033?v=4", "profile": "https://github.com/g3r4n", "contributions": [ "code" ] }, { "login": "Drarok", "name": "Mat Gadd", "avatar_url": "https://avatars0.githubusercontent.com/u/55830?v=4", "profile": "http://drarok.com/", "contributions": [ "bug", "code" ] }, { "login": "varbrad", "name": "Brad Davies", "avatar_url": "https://avatars1.githubusercontent.com/u/11805775?v=4", "profile": "https://bradlab.co.uk", "contributions": [ "bug", "code" ] }, { "login": "rafaelcamaram", "name": "Rafael Câmara", "avatar_url": "https://avatars1.githubusercontent.com/u/9087886?v=4", "profile": "http://www.rafaelcamaram.com/", "contributions": [ "code" ] }, { "login": "bahmutov", "name": "Gleb Bahmutov", "avatar_url": "https://avatars1.githubusercontent.com/u/2212006?v=4", "profile": "https://glebbahmutov.com/", "contributions": [ "test", "tool" ] }, { "login": "warborn", "name": "Iván Munguía", "avatar_url": "https://avatars2.githubusercontent.com/u/10677789?v=4", "profile": "https://ivan-munguia.netlify.com", "contributions": [ "code" ] }, { "login": "dmmulroy", "name": "Dillon Mulroy", "avatar_url": "https://avatars1.githubusercontent.com/u/2755722?v=4", "profile": "https://dillonmulroy.com", "contributions": [ "code" ] }, { "login": "NARKOZ", "name": "Nihad Abbasov", "avatar_url": "https://avatars2.githubusercontent.com/u/253398?v=4", "profile": "https://github.com/NARKOZ", "contributions": [ "code" ] }, { "login": "imbrn", "name": "Bruno C. Couto", "avatar_url": "https://avatars1.githubusercontent.com/u/1906977?v=4", "profile": "https://github.com/imbrn", "contributions": [ "code" ] }, { "login": "molnarmark", "name": "Mark Molnar", "avatar_url": "https://avatars2.githubusercontent.com/u/13263073?v=4", "profile": "https://github.com/molnarmark", "contributions": [ "code" ] }, { "login": "TETRA2000", "name": "Takahiko Inayama", "avatar_url": "https://avatars1.githubusercontent.com/u/1459450?v=4", "profile": "https://www.behance.net/tetra2000", "contributions": [ "code" ] }, { "login": "martinfrancois", "name": "François Martin", "avatar_url": "https://avatars1.githubusercontent.com/u/14319020?v=4", "profile": "https://github.com/martinfrancois", "contributions": [ "code" ] }, { "login": "raphamorim", "name": "Raphael Amorim", "avatar_url": "https://avatars3.githubusercontent.com/u/3630346?v=4", "profile": "http://raphamorim.io", "contributions": [ "code" ] }, { "login": "camflan", "name": "Camron Flanders", "avatar_url": "https://avatars0.githubusercontent.com/u/27292?v=4", "profile": "http://camronflanders.com", "contributions": [ "code" ] }, { "login": "ericadamski", "name": "Eric Adamski", "avatar_url": "https://avatars0.githubusercontent.com/u/6516758?v=4", "profile": "https://github.com/ericadamski", "contributions": [ "code" ] }, { "login": "wistcc", "name": "Winner Crespo", "avatar_url": "https://avatars0.githubusercontent.com/u/4671080?v=4", "profile": "http://winnercrespo.com", "contributions": [ "code", "design" ] }, { "login": "mixn", "name": "Milos", "avatar_url": "https://avatars3.githubusercontent.com/u/672237?v=4", "profile": "http://twitter.com/mixn", "contributions": [ "code", "tool", "doc", "translation" ] }, { "login": "mittalyashu", "name": "Yashu Mittal", "avatar_url": "https://avatars1.githubusercontent.com/u/29014463?v=4", "profile": "https://mittalyashu.now.sh/", "contributions": [ "code" ] }, { "login": "rachelcarmena", "name": "Rachel M. Carmena", "avatar_url": "https://avatars0.githubusercontent.com/u/22792183?v=4", "profile": "https://twitter.com/bberrycarmen", "contributions": [ "doc" ] }, { "login": "ucdstudent95618", "name": "Miguel Salazar", "avatar_url": "https://avatars0.githubusercontent.com/u/19369949?v=4", "profile": "https://www.linkedin.com/in/miguel-salazar-823b07a1/", "contributions": [ "doc", "translation" ] }, { "login": "vvyomjjain", "name": "Vyom Jain", "avatar_url": "https://avatars3.githubusercontent.com/u/19145803?v=4", "profile": "https://www.linkedin.com/in/vyom-jain-233a28139", "contributions": [ "doc", "translation" ] }, { "login": "racaljk", "name": "racaljk", "avatar_url": "https://avatars0.githubusercontent.com/u/5010047?v=4", "profile": "http://www.cnblogs.com/racaljk/", "contributions": [ "translation" ] }, { "login": "raboid", "name": "Sean", "avatar_url": "https://avatars3.githubusercontent.com/u/3892149?v=4", "profile": "https://lastblocklabs.com", "contributions": [ "code" ] }, { "login": "izabelacborges", "name": "Izabela Borges", "avatar_url": "https://avatars0.githubusercontent.com/u/19255077?v=4", "profile": "http://izabelacborges.com/", "contributions": [ "translation" ] }, { "login": "shinilms", "name": "Shinil M S", "avatar_url": "https://avatars2.githubusercontent.com/u/18573510?v=4", "profile": "https://ghuser.io/shinilms", "contributions": [ "translation" ] }, { "login": "berkeatac", "name": "Berke Atac", "avatar_url": "https://avatars1.githubusercontent.com/u/10579633?v=4", "profile": "https://github.com/berkeatac", "contributions": [ "translation" ] }, { "login": "wooooooak", "name": "LEE YONGJUN", "avatar_url": "https://avatars3.githubusercontent.com/u/18481078?v=4", "profile": "https://wooooooak.github.io/", "contributions": [ "translation" ] }, { "login": "MatthewNielsen27", "name": "Matthew Nielsen", "avatar_url": "https://avatars2.githubusercontent.com/u/35040439?v=4", "profile": "http://matthewnielsen.ca", "contributions": [ "code" ] }, { "login": "boyvanamstel", "name": "Boy", "avatar_url": "https://avatars2.githubusercontent.com/u/225410?v=4", "profile": "https://www.boy.sh", "contributions": [ "platform" ] }, { "login": "vetrivelcsamy", "name": "Vetrivel Chinnasamy", "avatar_url": "https://avatars2.githubusercontent.com/u/26738977?v=4", "profile": "https://vetrivelcsamy.xyz", "contributions": [ "translation" ] }, { "login": "farskid", "name": "Farzad YZ", "avatar_url": "https://avatars2.githubusercontent.com/u/8332043?s=460&v=4", "profile": "https://farzadyz.com", "contributions": [ "code", "ideas" ] }, { "login": "yannickl", "name": "Yannick Loriot", "avatar_url": "https://avatars0.githubusercontent.com/u/798235?s=460&v=4", "profile": "https://github.com/yannickl", "contributions": [ "translation" ] }, { "login": "Joel-hanson", "name": "Joel Hanson", "avatar_url": "https://avatars2.githubusercontent.com/u/17215044?s=460&v=4", "profile": "https://github.com/Joel-hanson", "contributions": [ "code" ] }, { "login": "muhammadmuzzammil1998", "name": "Muhammad Muzzammil", "avatar_url": "https://avatars2.githubusercontent.com/u/12321712?v=4", "profile": "https://muzzammil.xyz/?ref=github", "contributions": [ "code" ] }, { "login": "souppower", "name": "souppower", "avatar_url": "https://avatars2.githubusercontent.com/u/19849611?v=4", "profile": "https://github.com/souppower", "contributions": [ "infra" ] }, { "login": "uraway", "name": "Masato Urai (@uraway_)", "avatar_url": "https://avatars3.githubusercontent.com/u/15242484?v=4", "profile": "http://uraway.hatenablog.com/", "contributions": [ "translation" ] }, { "login": "techinpark", "name": "Fernando", "avatar_url": "https://avatars3.githubusercontent.com/u/45546296?v=4", "profile": "http://techinpark.com", "contributions": [ "translation" ] }, { "login": "megsachdev", "name": "Megha Sachdev", "avatar_url": "https://avatars1.githubusercontent.com/u/22325351?v=4", "profile": "https://github.com/megsachdev", "contributions": [ "code", "test" ] }, { "login": "anudeepreddy", "name": "Anudeep Reddy", "avatar_url": "https://avatars0.githubusercontent.com/u/6022231?v=4", "profile": "https://techgeekhub.ml", "contributions": [ "infra" ] }, { "login": "munierujp", "name": "Munieru", "avatar_url": "https://avatars2.githubusercontent.com/u/20086673?v=4", "profile": "https://munieru.jp", "contributions": [ "translation" ] }, { "login": "etoxin", "name": "Adam Lusted", "avatar_url": "https://avatars0.githubusercontent.com/u/393002?v=4", "profile": "http://www.etoxin.net", "contributions": [ "code" ] }, { "login": "JoseNoriegaa", "name": "Jose Noriega", "avatar_url": "https://avatars2.githubusercontent.com/u/28733681?v=4", "profile": "https://github.com/JoseNoriegaa", "contributions": [ "translation" ] }, { "login": "Merlintor", "name": "Merlin Fuchs", "avatar_url": "https://avatars2.githubusercontent.com/u/33966852?v=4", "profile": "https://discord.club", "contributions": [ "translation" ] }, { "login": "majouji", "name": "Ramy Majouji", "avatar_url": "https://avatars0.githubusercontent.com/u/23482161?v=4", "profile": "https://glossier.com", "contributions": [ "code" ] }, { "login": "nemesv", "name": "Viktor Nemes", "avatar_url": "https://avatars0.githubusercontent.com/u/251330?v=4", "profile": "http://stackoverflow.com/users/872395/nemesv", "contributions": [ "code" ] }, { "login": "ericwbailey", "name": "Eric Bailey", "avatar_url": "https://avatars3.githubusercontent.com/u/634191?v=4", "profile": "https://ericwbailey.design/", "contributions": [ "code" ] }, { "login": "Nazeeefa", "name": "Nazeefa", "avatar_url": "https://avatars0.githubusercontent.com/u/6730853?v=4", "profile": "http://rsg-sweden.iscbsc.org", "contributions": [ "translation" ] }, { "login": "pratikbutani", "name": "Pratik Butani", "avatar_url": "https://avatars2.githubusercontent.com/u/3306366?v=4", "profile": "https://medium.com/@pratikbutani/carbon-create-and-share-beautiful-images-of-your-source-code-d31dedfe64bd", "contributions": [ "blog" ] }, { "login": "baktiaditya", "name": "Bakti Aditya", "avatar_url": "https://avatars0.githubusercontent.com/u/2070906?v=4", "profile": "https://github.com/baktiaditya", "contributions": [ "code" ] }, { "login": "aquaductape", "name": "Caleb Taylor", "avatar_url": "https://avatars1.githubusercontent.com/u/29286430?v=4", "profile": "https://github.com/aquaductape", "contributions": [ "code" ] }, { "login": "rjmunhoz", "name": "Rogério Munhoz", "avatar_url": "https://avatars3.githubusercontent.com/u/3948961?v=4", "profile": "http://about.rmunhoz.me", "contributions": [ "code" ] }, { "login": "technoknol", "name": "Technoknol", "avatar_url": "https://avatars0.githubusercontent.com/u/6429418?v=4", "profile": "https://github.com/technoknol", "contributions": [ "code" ] }, { "login": "tmakowski", "name": "Tymoteusz Makowski", "avatar_url": "https://avatars3.githubusercontent.com/u/38053499?v=4", "profile": "https://github.com/tmakowski", "contributions": [ "code" ] }, { "login": "nisarhassan12", "name": "Nisar Hassan Naqvi", "avatar_url": "https://avatars3.githubusercontent.com/u/46004116?v=4", "profile": "https://nisar.dev", "contributions": [ "bug" ] }, { "login": "ilyaskarim", "name": "Ilyas Karim", "avatar_url": "https://avatars2.githubusercontent.com/u/42450390?v=4", "profile": "https://www.wapgee.com", "contributions": [ "bug" ] }, { "login": "njfix6", "name": "Nick Fix", "avatar_url": "https://avatars2.githubusercontent.com/u/6845581?v=4", "profile": "http://nickfix.me", "contributions": [ "ideas" ] }, { "login": "MelSumner", "name": "Melanie Sumner", "avatar_url": "https://avatars0.githubusercontent.com/u/4587451?v=4", "profile": "https://noti.st/melsumner", "contributions": [ "ideas" ] }, { "login": "b6pzeusbc54tvhw5jgpyw8pwz2x6gs", "name": "aluc", "avatar_url": "https://avatars2.githubusercontent.com/u/15520015?v=4", "profile": "https://aluc.io/", "contributions": [ "code" ] }, { "login": "mearns", "name": "B. Mearns", "avatar_url": "https://avatars1.githubusercontent.com/u/5140254?v=4", "profile": "https://github.com/mearns", "contributions": [ "ideas" ] }, { "login": "neighborhood999", "name": "Peng Jie", "avatar_url": "https://avatars3.githubusercontent.com/u/10325111?v=4", "profile": "http://jiepeng.me", "contributions": [ "code" ] }, { "login": "b3u", "name": "Binyamin Aron Green", "avatar_url": "https://avatars3.githubusercontent.com/u/39805353?v=4", "profile": "https://binyam.in", "contributions": [ "code" ] }, { "login": "mbiesiad", "name": "Michal", "avatar_url": "https://avatars0.githubusercontent.com/u/18367606?v=4", "profile": "https://dev.to/mbiesiad", "contributions": [ "translation" ] }, { "login": "qw-in", "name": "Quinn Blenkinsop", "avatar_url": "https://avatars0.githubusercontent.com/u/19194187?v=4", "profile": "https://github.com/qw-in", "contributions": [ "code" ] }, { "login": "seagalputra", "name": "Dwiferdio Seagal Putra", "avatar_url": "https://avatars0.githubusercontent.com/u/15377132?v=4", "profile": "https://github.com/seagalputra", "contributions": [ "code" ] }, { "login": "ashwoodall", "name": "Ashley Woodall Clark", "avatar_url": "https://avatars3.githubusercontent.com/u/14588617?v=4", "profile": "https://github.com/ashwoodall", "contributions": [ "code" ] }, { "login": "timwienk", "name": "Tim Wienk", "avatar_url": "https://avatars0.githubusercontent.com/u/150598?v=4", "profile": "https://tim.wienk.name/", "contributions": [ "translation" ] }, { "login": "george1410", "name": "George McCarron", "avatar_url": "https://avatars2.githubusercontent.com/u/9155723?v=4", "profile": "http://georgemccarron.com/", "contributions": [ "doc" ] }, { "login": "artmxra7", "name": "Erwin Rahayu", "avatar_url": "https://avatars.githubusercontent.com/u/23070604?v=4", "profile": "https://github.com/artmxra7", "contributions": [ "translation", "doc" ] }, { "login": "mlucap", "name": "Luca", "avatar_url": "https://avatars.githubusercontent.com/u/36577976?v=4", "profile": "https://github.com/mlucap", "contributions": [ "code" ] }, { "login": "adghayes", "name": "Andrew Hayes", "avatar_url": "https://avatars.githubusercontent.com/u/37960853?v=4", "profile": "https://github.com/adghayes", "contributions": [ "code" ] }, { "login": "heybereket", "name": "Bereket Semagn", "avatar_url": "https://avatars.githubusercontent.com/u/68391329?v=4", "profile": "https://github.com/heybereket", "contributions": [ "code" ] }, { "login": "LorenzoLancia", "name": "Lorenzo Lancia", "avatar_url": "https://avatars.githubusercontent.com/u/44911690?v=4", "profile": "https://github.com/LorenzoLancia", "contributions": [ "translation" ] }, { "login": "Guy-Adler", "name": "Guy Adler", "avatar_url": "https://avatars.githubusercontent.com/u/44903310?v=4", "profile": "https://github.com/Guy-Adler", "contributions": [ "translation" ] }, { "login": "danBamikiya", "name": "Dan Bamikiya", "avatar_url": "https://avatars.githubusercontent.com/u/58262528?v=4", "profile": "https://github.com/danBamikiya", "contributions": [ "ideas" ] }, { "login": "kewang", "name": "kewang", "avatar_url": "https://avatars.githubusercontent.com/u/795839?v=4", "profile": "https://github.com/kewang", "contributions": [ "translation" ] }, { "login": "rizdaprasetya", "name": "Rizda Dwi Prasetya", "avatar_url": "https://avatars.githubusercontent.com/u/13027142?v=4", "profile": "https://rizda.win/", "contributions": [ "content" ] }, { "login": "AbreuY", "name": "AbreuY", "avatar_url": "https://avatars.githubusercontent.com/u/5095949?v=4", "profile": "https://github.com/AbreuY", "contributions": [ "translation" ] }, { "login": "rizkytegar", "name": ">_Rizky.dev", "avatar_url": "https://avatars.githubusercontent.com/u/55475891?v=4", "profile": "https://www.rizkytegar.com/", "contributions": [ "translation", "doc" ] }, { "login": "OpeAbidemi", "name": "Abidemi Harry", "avatar_url": "https://avatars.githubusercontent.com/u/58413594?v=4", "profile": "https://github.com/OpeAbidemi", "contributions": [ "code" ] }, { "login": "mcognetta", "name": "Marco", "avatar_url": "https://avatars.githubusercontent.com/u/6856636?v=4", "profile": "https://github.com/mcognetta", "contributions": [ "translation" ] }, { "login": "samrobbins85", "name": "Sam Robbins", "avatar_url": "https://avatars.githubusercontent.com/u/29740136?v=4", "profile": "https://github.com/samrobbins85", "contributions": [ "doc" ] }, { "login": "alceil", "name": "alceil", "avatar_url": "https://avatars.githubusercontent.com/u/47685349?v=4", "profile": "https://github.com/alceil", "contributions": [ "code" ] }, { "login": "hatsu38", "name": "hatsu", "avatar_url": "https://avatars.githubusercontent.com/u/16137809?v=4", "profile": "https://github.com/hatsu38", "contributions": [ "code" ] }, { "login": "praveenscience", "name": "Praveen Kumar Purushothaman", "avatar_url": "https://avatars.githubusercontent.com/u/1830380?v=4", "profile": "https://github.com/praveenscience", "contributions": [ "translation" ] }, { "login": "Amirosagan", "name": "Amir Elsagan", "avatar_url": "https://avatars.githubusercontent.com/u/53624184?v=4", "profile": "https://github.com/Amirosagan", "contributions": [ "translation" ] }, { "login": "korzck", "name": "korzck", "avatar_url": "https://avatars.githubusercontent.com/u/87325587?v=4", "profile": "https://github.com/korzck", "contributions": [ "translation" ] }, { "login": "sakibulalam", "name": "Sakibul Alam", "avatar_url": "https://avatars.githubusercontent.com/u/4949223?v=4", "profile": "https://github.com/sakibulalam", "contributions": [ "translation" ] } ], "repoType": "github", "repoHost": "https://github.com", "contributorsPerLine": 7, "commitConvention": "none", "skipCi": true } ================================================ FILE: .eslintrc.js ================================================ module.exports = { env: { es6: true, jest: true }, extends: ['eslint:recommended', 'plugin:jsx-a11y/recommended', 'next'], rules: { 'import/no-unresolved': 'error', 'no-duplicate-imports': 'error', 'react/display-name': 'off', 'react/jsx-no-target-blank': 'error', 'react/jsx-uses-react': 'error', 'react/jsx-uses-vars': 'error', 'jsx-a11y/click-events-have-key-events': 'off', 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'error', 'no-console': ['error', { allow: ['error'] }], // TODO re-enable these '@next/next/no-img-element': 'off', '@next/next/no-html-link-for-pages': 'off', '@next/next/link-passhref': 'off', }, } ================================================ FILE: .github/CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at carbon.now.sh@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: .github/CONTRIBUTING.md ================================================ # Contributing If you have discovered a bug or have a feature suggestion, feel free to create an issue on GitHub. You don't need to be assigned an issue in order to work on it—consider all issues free rein. If you'd like to make some changes yourself, see the following: 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device 1. Make sure yarn is globally installed (`npm install -g yarn`) 1. Run `yarn` to download required packages 1. Build and start the application: `yarn dev` 1. Finally, submit a [pull request](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) with your changes! This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification, and uses the [@all-contributors](https://allcontributors.org/docs/en/bot/usage) bot to add new contributors. Contributions of any kind are welcome! ### Adding themes/languages/fonts We are not currently accepting new themes, languages, or fonts into Carbon, except for in extenuating circumstances. Instead, we want to continue to provide ways for users to add their own themes and presets. Please feel free to still open an issue or PR for consideration, but know that there is a chance it will get closed without addition. ## Stats ![Alt](https://repobeats.axiom.co/api/embed/471ed135120d0b6c3ec17fa4e8aa371c9173bd87.svg "Repobeats analytics image") ================================================ FILE: .github/FUNDING.yml ================================================ github: [carbon-app, mfix22] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] open_collective: # carbon-app/contribute patreon: # Replace with a single Patreon username ko_fi: # Replace with a single Ko-fi username tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username otechie: # Replace with a single Otechie username custom: [] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Create a report to help fix something about Carbon title: '' labels: bug assignees: '' --- **Describe the bug** A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: 1. Go to '…' 2. Click on '…' 3. See error **Expected behavior** A clear and concise description of what you expected to happen. **Screenshots** If applicable, add screenshots to help explain your problem. **Info (please complete the following information):** - OS [e.g. macOS, Linux, Windows, iOS]: - Browser [e.g. Chrome, Safari, Firefox]: - Carbon URL [e.g. carbon.now.sh?bg=pink]:
Code snippet
================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature request about: Suggest an idea for this project title: '' labels: enhancement assignees: '' --- **Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here. ================================================ FILE: .github/ISSUE_TEMPLATE/other.md ================================================ --- name: Other about: Let us know about something else title: '' labels: '' assignees: '' --- **Describe the change** A clear and concise description of your proposal. **Screenshots** If applicable, add screenshots to help explain the issue. **Info (please complete the following information):** - OS [e.g. macOS, Linux, Windows, iOS]: - Browser [e.g. Chrome, Safari, Firefox]:
Code snippet
================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ - [ ] Integration tests (if applicable) Closes # ================================================ FILE: .github/dependabot.yml ================================================ version: 2 updates: # Configuration for npm - package-ecosystem: 'npm' directory: '/' schedule: interval: 'daily' allow: dependency-type: 'development' # labels: # - 'dependencies' # ignore: # https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-update ================================================ FILE: .github/ranger.yml ================================================ _extends: reporanger/superpowers labels: dependencies: merge contributor: action: comment delay: 0s message: '@all-contributors add @$AUTHOR for code' translator: action: comment delay: 0s message: '@all-contributors add @$AUTHOR for translation' duplicate: action: close delay: 2 days comment: ⚠️ This has been marked to be closed in $DELAY. 'theme/language': action: close delay: 3 days comment: | This issue has been marked "$LABEL". As of Carbon `4.0.0`, the Carbon core team is no longer implementing new themes or languages, except for in extenuating circumstances. You can create your own theme in the "Themes" dropdown. This issue will remain open for $DELAY for further consideration. commits: - action: label pattern: 'upgrade dep' labels: - maintenance - action: label user: 'allcontributors[bot]' labels: - 'squash when passing' ================================================ FILE: .github/workflows/validate.yml ================================================ name: CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Use Node.js uses: actions/setup-node@v3 - name: npm install, lint, build, and test run: | yarn npm run lint --if-present npm run build --if-present npm start & npx wait-on http://localhost:3000 && npm run cy:run -- --config baseUrl=http://localhost:3000 # --record --key 26c0b9eb-40f9-4ca6-b91d-a39f03652011 env: CI: true CYPRESS_CI: true ================================================ FILE: .gitignore ================================================ node_modules .env* .next dist out cypress/videos cypress/screenshots .idea .DS_Store packaged coverage public/service-worker.js private-key.json .now .vercel *.log ================================================ FILE: .npmrc ================================================ package-lock=false registry=https://registry.npmjs.org ================================================ FILE: .prettierrc ================================================ { "singleQuote": true, "printWidth": 100, "semi": false, "arrowParens": "avoid" } ================================================ FILE: .vercelignore ================================================ .github LICENSE README.md bin node_modules cypress cypress.json docs ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2022 Carbon Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

maintained with Ranger All Contributors MIT License FOSSA Status



##### Translations
Español हिंदी Deutsch 简体中文 Português
മലയാളം Türkçe 한국어 தமிழ் Français
日本語 Svenska Polski Nederlands 正體中文
Indonesia Українська Italiano עברית Русский
العربية বাংলা فارسی Add +
## Introduction You know [all](https://twitter.com/dan_abramov/status/890191815567175680) [of those](https://twitter.com/reactjs/status/890511993261654017) [code screenshots](https://twitter.com/notquiteleo/status/873483329345028096) you see on Twitter? Though the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.

Carbon example

## Features - **Customization**. Customize things like your image's syntax theme, font style, and more - **Share quickly**. Save your image or a link with one click - **Save snippets**. Create an account to save snippets for later. Shared snippets are automatically unfurled on Twitter and Slack. ## Usage #### Import There are a few different ways to import code into Carbon: - Drop a file onto the editor - Append a GitHub gist ID to the URL (e.g. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Or just start typing! #### Customization Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, padding, shadows, fonts, and more. #### Exporting & Sharing After you've customized your image you can share your snippet in a number of ways ##### Create a saved snippet Sharing a saved snippet will automatically unfurl the image on platforms like Twitter and Slack. This lets users see your creation, while also giving them access to the source code via the link. Better yet, if you need to make an update, simply follow the link yourself to edit the snippet directly. To create a saved snippet: 1. Login using the "Sign in/Sign up" button 2. Edit as you normally would — your snippet will get saved automatically 3. Copy the URL from your browser window and share away! ##### Embed a snippet This is the recommended method for sharing Carbon on your own website or blog. Readers can even copy the code with the click of a button. You can embed any Carbon snippet in your website directly using the `carbon.now.sh/embed` URL. The "Copy Menu" lets you quickly copy the correct iFrame snippet, or the encoded URL for embedding on platforms like Medium. Finally, you can also embed saved snippets or GitHub gists using `carbon.now.sh/embed/:id`. ##### Use the Tweet button The Tweet button will not only share the image on Twitter, but it will also correctly encode the `alt` text to ensure your images are accessible. However, if you want to tweet image yourself, please check out [how to make your Twitter images accessible](https://help.twitter.com/en/using-twitter/picture-descriptions). ##### Download the image directly Carbon supports downloading your image as a PNG and SVG. You can also click `Export → Open` to open your image directly in the browser. Finally, you can copy the Carbon image directly to your clipboard by going to `Copy → Image`. #### Installing Carbon for Desktop (Offline) If you are using Google Chrome, or another browser that supports Progressive Web Apps, you can install Carbon for use offline by: 1. Visit [carbon.now.sh](https://carbon.now.sh) 2. Click your browser's settings menu 3. Click "Install Carbon..." ## Community Check out these projects our awesome community has created: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Open up the selection in your current IntelliJ IDEA file in Carbon through a context menu - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Open up your current Atom file in Carbon with `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Open up your current VS Code file in Carbon with command `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Open up the selection in your current Sublime Text 3 file with a custom bound key - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Open up the selection in your current Vim/Neovim using function `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Open up the selection in your current Emacs using interactive function `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Open up your current selection in `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - This Xcode extension enables you to export a code selection as a Carbon snippet in a single action ##### Tools - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Open a file in Carbon or download it directly using `carbon-now`, featuring an interactive mode, selective highlighting and more - [CodeExpander](https://codeexpander.com) - A smart GitHub gist client with the TextExpander features - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Export multiple Carbon code snippets from `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - A Telegram chatbot which takes in a code snippet or gist URL and generates an Carbon image - [R `carbonate`](https://yonicd.github.io/carbonate/) - Iteratively manipulate image aesthetics in `R` and either open in Carbon or download directly. - [Carbon for Slack](https://github.com/faisalsayed10/carbon-slack) - Use Carbon directly in Slack. Just invoke the `/carbon` command. ##### Citations - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - a computer science textbook by Sarbo Roy. ## Authors Carbon is a project by: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### License [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

--- ## Contribute & Support Pull requests are welcome! Please see our [contributing guidelines](/.github/CONTRIBUTING.md) for more details. ### Sponsors & Backers [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) [![Powered by Vercel](https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg)](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) ### Thanks To [▲ Vercel](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) for sponsoring Carbon's hosting. ### All Contributors Thanks goes out to all these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

briandennis
💻 📖 🚇 👀
mfix22
💬 💻 🤔
jakedex
💬 💻 🎨 📹
andrewda
💬 💻 🐛 👀
yeskunall
💻 📖 🔧 🐛
stoshfabricius
💻
jkling38
📖

otobrglez
💻
darahak
📖
dom96
💻
elrumordelaluz
💻
cjb
💻
Krzysztof-Cieslak
💻
fernahh
📖

g3r4n
💻
Mat Gadd
🐛 💻
Brad Davies
🐛 💻
Rafael Câmara
💻
Gleb Bahmutov
⚠️ 🔧
Iván Munguía
💻
Dillon Mulroy
💻

Nihad Abbasov
💻
Bruno C. Couto
💻
Mark Molnar
💻
Takahiko Inayama
💻
François Martin
💻
Raphael Amorim
💻
Camron Flanders
💻

Eric Adamski
💻
Winner Crespo
💻 🎨
Milos
💻 🔧 📖 🌍
Yashu Mittal
💻
Rachel M. Carmena
📖
Miguel Salazar
📖 🌍
Vyom Jain
📖 🌍

racaljk
🌍
Sean
💻
Izabela Borges
🌍
Shinil M S
🌍
Berke Atac
🌍
LEE YONGJUN
🌍
Matthew Nielsen
💻

Boy
📦
Vetrivel Chinnasamy
🌍
Farzad YZ
💻 🤔
Yannick Loriot
🌍
Joel Hanson
💻
Muhammad Muzzammil
💻
souppower
🚇

Masato Urai (@uraway_)
🌍
Fernando
🌍
Megha Sachdev
💻 ⚠️
Anudeep Reddy
🚇
Munieru
🌍
Adam Lusted
💻
Jose Noriega
🌍

Merlin Fuchs
🌍
Ramy Majouji
💻
Viktor Nemes
💻
Eric Bailey
💻
Nazeefa
🌍
Pratik Butani
📝
Bakti Aditya
💻

Caleb Taylor
💻
Rogério Munhoz
💻
Technoknol
💻
Tymoteusz Makowski
💻
Nisar Hassan Naqvi
🐛
Ilyas Karim
🐛
Nick Fix
🤔

Melanie Sumner
🤔
aluc
💻
B. Mearns
🤔
Peng Jie
💻
Binyamin Aron Green
💻
Michal
🌍
Quinn Blenkinsop
💻

Dwiferdio Seagal Putra
💻
Ashley Woodall Clark
💻
Tim Wienk
🌍
George McCarron
📖
Erwin Rahayu
🌍 📖
Luca
💻
Andrew Hayes
💻

Bereket Semagn
💻
Lorenzo Lancia
🌍
Guy Adler
🌍
Dan Bamikiya
🤔
kewang
🌍
Rizda Dwi Prasetya
🖋
AbreuY
🌍

>_Rizky.dev
🌍 📖
Abidemi Harry
💻
Marco
🌍
Sam Robbins
📖
alceil
💻
hatsu
💻
Praveen Kumar Purushothaman
🌍

Amir Elsagan
🌍
korzck
🌍
Sakibul Alam
🌍
================================================ FILE: SECURITY.md ================================================ # Security Policy Please contact us at [carbon.now.sh+security@gmail.com](mailto:carbon.now.sh+security@gmail.com) to privately inform us of any security vulnerability or issue. ================================================ FILE: bin/deploy.sh ================================================ #!/usr/bin/env bash set -e vercel switch carbon-app VERCEL_URL=$(vercel) yarn cy:run --config baseUrl="$VERCEL_URL" echo "$VERCEL_URL"| tee /dev/tty | pbcopy read -p "Deploy to production (y/N)?" -r echo if [[ $REPLY =~ ^[Yy]$ ]] then vercel alias "$VERCEL_URL" carbon.now.sh fi ================================================ FILE: components/Announcement.js ================================================ import React from 'react' // Feature flag const ACTIVE = false const key = 'CARBON_CTA_4' function Toast() { const [open, setState] = React.useState(false) React.useEffect(() => { window.localStorage.removeItem('CARBON_CTA_2') window.localStorage.removeItem('CARBON_CTA_3') if (!window.localStorage.getItem(key)) { setState(true) } }, []) if (process.env.NODE_ENV !== 'production') { return null } if (!ACTIVE) { return null } if (!open) { return null } function close() { setState(false) window.localStorage.setItem(key, true) } return (

Black Lives Matter.

Help end police violence in America →
) } export default Toast ================================================ FILE: components/ApiContext.js ================================================ import React from 'react' import api from '../lib/api' const Context = React.createContext(api) export function useAPI() { return React.useContext(Context) } export default Context ================================================ FILE: components/AuthContext.js ================================================ import React from 'react' import firebase from '../lib/client' // IDEA: just read from firebase store at request time? import { client } from '../lib/api' export const Context = React.createContext(null) export function useAuth() { return React.useContext(Context) } function AuthContext(props) { const [user, setState] = React.useState(null) React.useEffect(() => { if (firebase) { firebase.auth().onAuthStateChanged(newUser => setState(newUser)) } }, []) React.useEffect(() => { if (user) { user.getIdToken().then(jwt => { client.defaults.headers['Authorization'] = jwt ? `Bearer ${jwt}` : undefined }) } else { delete client.defaults.headers['Authorization'] } }, [user]) return {props.children} } export default AuthContext ================================================ FILE: components/BackgroundSelect.js ================================================ import React from 'react' import ImagePicker from './ImagePicker' import ColorPicker from './ColorPicker' import Button from './Button' import Popout, { managePopout } from './Popout' import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants' import { stringifyColor } from '../lib/util' function validateColor(str) { if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) { return str } } class BackgroundSelect extends React.PureComponent { selectTab = name => { if (this.props.mode !== name) { this.props.onChange({ backgroundMode: name }) } } handlePickColor = color => this.props.onChange({ backgroundColor: stringifyColor(color) }) render() { const { color, mode, image, onChange, isVisible, toggleVisibility, carbonRef, updateHighlights, } = this.props const background = validateColor(color) ? color : DEFAULT_BG_COLOR const aspectRatio = carbonRef ? carbonRef.clientWidth / carbonRef.clientHeight : 1 return (
) } } export default managePopout(BackgroundSelect) ================================================ FILE: components/Billing.js ================================================ import React from 'react' import { useAsyncCallback } from 'actionsack' import Button from './Button' import Input from './Input' import { useAuth } from './AuthContext' import LoginButton from './LoginButton' import { COLORS } from '../lib/constants' const X = ( ) export default function Billing() { const user = useAuth() const [submit, { error, loading }] = useAsyncCallback(() => true) const success = true if (!user) { return (
) } return (
{success ? (

Thank you for supporting Carbon!

However, Carbon Diamond is not quite ready yet.
{/* Your card has not been charged or saved today. */}
We greatly appreciate your support, and will let you know when premium features launch!

— the Carbon Team{' '} 💛🖤

) : (

Upgrade to Diamond
($5.00 / month)

Please enter a credit or debit card:

{/** Insert Stripe element here */}
(By clicking subscribe, you are accepting the{' '} terms and conditions)
{X} {error}
)}
) } ================================================ FILE: components/Button.js ================================================ import React from 'react' import VisuallyHidden from '@reach/visually-hidden' import { COLORS } from '../lib/constants' const Button = ({ id, onClick = () => {}, background = COLORS.BLACK, color = COLORS.SECONDARY, textColor, hoverBackground = COLORS.HOVER, hoverColor, disabled, selected, children, border, center, large, flex = 1, padding = 0, margin = 0, title, Component = 'button', display, ...props }) => ( {title && {title}} {children} ) export default Button ================================================ FILE: components/Carbon.js ================================================ import React from 'react' import ReactDOM from 'react-dom' import dynamic from 'next/dynamic' import hljs from 'highlight.js/lib/core' import javascript from 'highlight.js/lib/languages/javascript' import debounce from 'lodash.debounce' import ms from 'ms' import { Controlled as CodeMirror } from 'react-codemirror2' hljs.registerLanguage('javascript', javascript) import { Spinner } from './Spinner' import WindowControls from './WindowControls' import WidthHandler from './WidthHandler' import { COLORS, LANGUAGES, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, LANGUAGE_MIME_HASH, DEFAULT_SETTINGS, THEMES_HASH, } from '../lib/constants' const SelectionEditor = dynamic(() => import('./SelectionEditor'), { loading: () => null, }) const Watermark = dynamic(() => import('./svg/Watermark'), { loading: () => null, }) function searchLanguage(l) { return LANGUAGE_NAME_HASH[l] || LANGUAGE_MODE_HASH[l] || LANGUAGE_MIME_HASH[l] } function noop() {} function getUnderline(underline) { switch (underline) { case 1: return 'underline' case 2: /** * Chrome will only round to the nearest wave, causing visual inconsistencies * https://stackoverflow.com/questions/57559588/how-to-make-the-wavy-underline-extend-cover-all-the-characters-in-chrome */ return `${COLORS.RED} wavy underline; text-decoration-skip-ink: none` } return 'initial' } class Carbon extends React.PureComponent { static defaultProps = { onChange: noop, onGutterClick: noop, } state = {} handleLanguageChange = debounce( (newCode, language) => { if (language === 'auto') { // try to set the language const detectedLanguage = hljs.highlightAuto(newCode).language const languageMode = searchLanguage(detectedLanguage) if (languageMode) { return languageMode.mime || languageMode.mode } } const languageMode = searchLanguage(language) if (languageMode) { return languageMode.mime || languageMode.mode } return language }, ms('300ms'), { leading: true, trailing: true, } ) onBeforeChange = (editor, meta, code) => { if (!this.props.readOnly) { this.props.onChange(code) } } onSelection = (ed, data) => { if (this.props.readOnly) { return } const selection = data.ranges[0] if ( selection.head.line === selection.anchor.line && selection.head.ch === selection.anchor.ch ) { return (this.currentSelection = null) } if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) { this.currentSelection = { from: selection.anchor, to: selection.head, } } else { this.currentSelection = { from: selection.head, to: selection.anchor, } } } onMouseUp = () => { if (this.currentSelection) { this.setState({ selectionAt: this.currentSelection }, () => { this.currentSelection = null }) } else { this.setState({ selectionAt: null }) } } onSelectionChange = changes => { if (this.state.selectionAt) { const css = [ changes.bold != null && `font-weight: ${changes.bold ? 'bold' : 'initial'}`, changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`, changes.underline != null && `text-decoration: ${getUnderline(changes.underline)}`, changes.color != null && `color: ${changes.color} !important`, ] .filter(Boolean) .join('; ') if (css) { this.props.editorRef.current.editor.doc.markText( this.state.selectionAt.from, this.state.selectionAt.to, { css } ) } } } render() { const config = { ...DEFAULT_SETTINGS, ...this.props.config } const languageMode = this.handleLanguageChange( this.props.children, config.language && config.language.toLowerCase() ) const options = { screenReaderLabel: 'Code editor', lineNumbers: config.lineNumbers, firstLineNumber: config.firstLineNumber, mode: languageMode || 'plaintext', theme: config.theme, scrollbarStyle: null, viewportMargin: Infinity, lineWrapping: true, smartIndent: true, extraKeys: { 'Shift-Tab': 'indentLess', }, readOnly: this.props.readOnly, showInvisibles: config.hiddenCharacters, autoCloseBrackets: true, } const backgroundImage = (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) || this.props.config.backgroundImage const themeConfig = this.props.theme || THEMES_HASH[config.theme] const light = themeConfig && themeConfig.light /* eslint-disable jsx-a11y/no-static-element-interactions */ const selectionNode = !this.props.readOnly && !!this.state.selectionAt && document.getElementById('style-editor-button') return (
{this.props.loading ? ( // TODO investigate removing these hard-coded values
) : (
{config.windowControls ? ( ) : null} {config.watermark && }
{/* TODO pass in this child as a prop to Carbon */}
)}
{selectionNode && ReactDOM.createPortal( , // TODO: don't use portal? selectionNode )}
) } } let modesLoaded = false function useModeLoader() { React.useEffect(() => { if (!modesLoaded) { // Load Codemirror add-ons require('../lib/custom/autoCloseBrackets') // Load Codemirror modes LANGUAGES.filter( language => language.mode && language.mode !== 'auto' && language.mode !== 'text' ).forEach(language => { language.custom ? require(`../lib/custom/modes/${language.mode}`) : require(`codemirror/mode/${language.mode}/${language.mode}`) }) modesLoaded = true } }, []) } let highLightsLoaded = false function useHighlightLoader() { React.useEffect(() => { if (!highLightsLoaded) { import('../lib/highlight-languages') .then(res => res.default.map(config => hljs.registerLanguage(config[0], config[1]))) .then(() => { highLightsLoaded = true }) } }, []) } function selectedLinesReducer( { prevLine, selected }, { type, lineNumber, numLines, selectedLines } ) { const newState = {} switch (type) { case 'GROUP': { if (prevLine) { for (let i = Math.min(prevLine, lineNumber); i < Math.max(prevLine, lineNumber) + 1; i++) { newState[i] = selected[prevLine] } } break } case 'MULTILINE': { for (let i = 0; i < selectedLines.length; i++) { newState[selectedLines[i] - 1] = true } break } default: { for (let i = 0; i < numLines; i++) { if (i != lineNumber) { if (prevLine == null) { newState[i] = false } } else { newState[lineNumber] = selected[lineNumber] === true ? false : true } } } } return { selected: { ...selected, ...newState }, prevLine: lineNumber, } } function useSelectedLines(props, editorRef) { const [state, dispatch] = React.useReducer(selectedLinesReducer, { prevLine: null, selected: {}, }) React.useEffect(() => { if (editorRef.current && Object.keys(state.selected).length > 0) { editorRef.current.editor.display.view.forEach((line, i) => { if (line.text) { line.text.style.opacity = state.selected[i] === true ? 1 : 0.5 } if (line.gutter) { line.gutter.style.opacity = state.selected[i] === true ? 1 : 0.5 } }) } }, [state.selected, props.children, props.config, editorRef]) React.useEffect(() => { if (props.config.selectedLines) { dispatch({ type: 'MULTILINE', selectedLines: props.config.selectedLines, }) } }, [props.config.selectedLines]) return React.useCallback(function onGutterClick(editor, lineNumber, gutter, e) { const numLines = editor.display.view.length const type = e.shiftKey ? 'GROUP' : 'LINE' dispatch({ type, lineNumber, numLines }) }, []) } function useShowInvisiblesLoader() { React.useEffect(() => void require('cm-show-invisibles'), []) } function CarbonContainer(props, ref) { useModeLoader() useHighlightLoader() useShowInvisiblesLoader() const editorRef = React.createRef() const onGutterClick = useSelectedLines(props, editorRef) return } export default React.forwardRef(CarbonContainer) ================================================ FILE: components/ColorPicker.js ================================================ import React from 'react' import SketchPicker from 'react-color/lib/Sketch' import { COLORS } from '../lib/constants' import { stringifyColor } from '../lib/util' const pickerStyle = { backgroundColor: COLORS.BLACK, padding: '8px 8px 0', margin: '0 auto 1px', } export default function ColorPicker(props) { const [color, setColor] = React.useState(props.color) const { onChange = () => {}, presets, style, disableAlpha } = props return ( ) } ================================================ FILE: components/ConfirmButton.js ================================================ import React from 'react' import Button from './Button' export default function ConfirmButton(props) { const [confirmed, setConfirmed] = React.useState(false) return ( ) } ================================================ FILE: components/CopyMenu.js ================================================ import React from 'react' import { useRouter } from 'next/router' import { useCopyTextHandler, useAsyncCallback, useKeyboardListener } from 'actionsack' import morph from 'morphmorph' import { COLORS } from '../lib/constants' import Button from './Button' import Popout, { managePopout } from './Popout' import CopySVG from './svg/Copy' const toIFrame = (url, width, height) => ` ` const toURL = url => `${location.origin}${url}` // Medium does not handle asterisks correctly - https://github.com/carbon-app/carbon/issues/1067 const replaceAsterisks = string => string.replace(/\*/g, '%2A') const toEncodedURL = morph.compose(encodeURI, replaceAsterisks, toURL) function CopyButton(props) { return (
) } export default managePopout(React.memo(CopyMenu)) ================================================ FILE: components/Dropdown.js ================================================ import React from 'react' import Downshift from 'downshift' import { matchSorter } from 'match-sorter' import VisuallyHidden from '@reach/visually-hidden' import { Down as ArrowDown } from './svg/Arrows' import CheckMark from './svg/Checkmark' import { COLORS } from '../lib/constants' class Dropdown extends React.PureComponent { state = { inputValue: this.props.selected.name, itemsToShow: this.props.list, } onUserAction = changes => { this.setState(({ inputValue, itemsToShow }) => { if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) { if (changes.type === Downshift.stateChangeTypes.keyDownEscape) { inputValue = this.userInputtedValue } else if (changes.type === Downshift.stateChangeTypes.changeInput) { inputValue = changes.inputValue this.userInputtedValue = changes.inputValue } else { inputValue = changes.inputValue } } itemsToShow = this.userInputtedValue ? matchSorter(this.props.list, this.userInputtedValue, { keys: ['name'] }) : this.props.list if ( Object.prototype.hasOwnProperty.call(changes, 'highlightedIndex') && (changes.type === Downshift.stateChangeTypes.keyDownArrowUp || changes.type === Downshift.stateChangeTypes.keyDownArrowDown) ) { inputValue = itemsToShow[changes.highlightedIndex].name this.props.onChange(itemsToShow[changes.highlightedIndex]) } if (Object.prototype.hasOwnProperty.call(changes, 'isOpen')) { this.userInputtedValue = '' // clear on open if (changes.isOpen) { inputValue = '' this.props.onOpen && this.props.onOpen() } else if (changes.isOpen === false && !inputValue) { // set on close inputValue = this.props.selected.name } } return { inputValue, itemsToShow } }) } userInputtedValue = '' render() { const { innerRef, color, selected, onChange, itemWrapper, icon, disableInput, title } = this.props const { itemsToShow, inputValue } = this.state const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined return ( it === selected)} itemToString={item => item.name} onChange={onChange} onUserAction={this.onUserAction} labelId={labelId} > {renderDropdown({ color, list: itemsToShow, selected, itemWrapper, icon, disableInput, title, labelId, })} ) } } const renderDropdown = ({ color, list, itemWrapper, icon, disableInput, title, labelId }) => ({ isOpen, highlightedIndex, selectedItem, getRootProps, getToggleButtonProps, getInputProps, getItemProps, }) => { return ( {title && {title}} {icon} {selectedItem.name} {isOpen ? ( {list.map((item, index) => ( {item.name} ))} ) : null} ) } const DropdownContainer = ({ children, innerRef, ...rest }) => { return (
{children}
) } const DropdownIcon = ({ children, isOpen }) => { if (children) { return (
{children}
) } else { return null } } const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, color, hasIcon, disabled, }) => { const itemColor = color || COLORS.SECONDARY return (
) } const ListItems = ({ children, color }) => { return ( ) } const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, item, ...rest }) => { const itemColor = color || COLORS.SECONDARY return (
  • {itemWrapper ? ( itemWrapper({ children, color: itemColor, item, isSelected }) ) : ( {children} )} {isSelected ? : null}
    • ) } export default Dropdown ================================================ FILE: components/Editor.js ================================================ // Theirs import React from 'react' import Dropzone from 'dropperx' import debounce from 'lodash.debounce' import dynamic from 'next/dynamic' // Ours import ApiContext from './ApiContext' import Dropdown from './Dropdown' import Settings from './Settings' import Toolbar from './Toolbar' import Overlay from './Overlay' import BackgroundSelect from './BackgroundSelect' import Carbon from './Carbon' import ExportMenu from './ExportMenu' import ShareMenu from './ShareMenu' import CopyMenu from './CopyMenu' import Themes from './Themes' import FontFace from './FontFace' import LanguageIcon from './svg/Language' import { LANGUAGES, LANGUAGE_MIME_HASH, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_EXPORT_SIZE, COLORS, EXPORT_SIZES_HASH, DEFAULT_CODE, DEFAULT_SETTINGS, DEFAULT_LANGUAGE, DEFAULT_THEME, FONTS, } from '../lib/constants' import { getRouteState } from '../lib/routing' import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util' import domtoimage from '../lib/dom-to-image' const languageIcon = const SnippetToolbar = dynamic(() => import('./SnippetToolbar'), { loading: () => null, }) const getConfig = omit(['code', 'titleBar']) const unsplashPhotographerCredit = /\n\n\/\/ Photo by.+?on Unsplash/ class Editor extends React.Component { static contextType = ApiContext state = { ...DEFAULT_SETTINGS, ...this.props.snippet, loading: true, } async componentDidMount() { const { queryState } = getRouteState(this.props.router) const newState = { // IDEA: we could create an interface for loading this config, so that it looks identical // whether config is loaded from localStorage, gist, or even something like IndexDB // Load options from gist or localStorage ...(this.props.snippet ? null : getSettings(localStorage)), // and then URL params ...queryState, loading: false, } // Makes sure the slash in 'application/X' is decoded if (newState.language) { newState.language = unescapeHtml(newState.language) } if (newState.fontFamily && !FONTS.find(({ id }) => id === newState.fontFamily)) { newState.fontFamily = DEFAULT_SETTINGS.fontFamily } this.setState(newState) } carbonNode = React.createRef() getTheme = () => this.props.themes.find(t => t.id === this.state.theme) || DEFAULT_THEME onUpdate = debounce(updates => this.props.onUpdate(updates), 750, { trailing: true, leading: true, }) sync = () => this.onUpdate(this.state) updateState = updates => this.setState(updates, this.sync) updateCode = code => this.updateState({ code }) updateTitleBar = titleBar => this.updateState({ titleBar }) updateWidth = width => this.setState({ widthAdjustment: false, width }) getCarbonImage = async ( { format, squared = this.state.squaredImage, exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value, } = { format: 'png' } ) => { const node = this.carbonNode.current const width = node.offsetWidth * exportSize const height = squared ? node.offsetWidth * exportSize : node.offsetHeight * exportSize const config = { style: { transform: `scale(${exportSize})`, transformOrigin: 'top left', background: squared ? this.state.backgroundColor : 'none', alignItems: 'start', justifyContent: 'start', }, filter: n => { if (n.className) { const className = String(n.className) if (className.includes('eliminateOnRender')) { return false } if (className.includes('CodeMirror-cursors')) { return false } } return true }, width, height, } if (format === 'svg') { return domtoimage .toSvg(node, config) .then(dataURL => dataURL .replace(/ /g, ' ') // https://github.com/tsayen/dom-to-image/blob/fae625bce0970b3a039671ea7f338d05ecb3d0e8/src/dom-to-image.js#L551 .replace(/%23/g, '#') .replace(/%0A/g, '\n') // https://stackoverflow.com/questions/7604436/xmlparseentityref-no-name-warnings-while-loading-xml-into-a-php-file .replace(/&(?!#?[a-z0-9]+;)/g, '&') // remove other fonts which are not used .replace( // current font-family used new RegExp( '@font-face\\s+{\\s+font-family: (?!"*' + this.state.fontFamily + ').*?}', 'g' ), '' ) ) .then(uri => uri.slice(uri.indexOf(',') + 1)) .then(data => new Blob([data], { type: 'image/svg+xml' })) } if (format === 'blob') { return domtoimage.toBlob(node, config) } // Twitter and Imgur needs regular dataURLs return domtoimage.toPng(node, config) } tweet = () => { this.getCarbonImage({ format: 'png' }).then( this.context.tweet.bind(null, this.state.code || DEFAULT_CODE) ) } imgur = () => { const prefix = this.state.name || 'carbon' return this.getCarbonImage({ format: 'png' }).then(data => this.context.imgur(data, prefix)) } exportImage = (format = 'blob', options = {}) => { const link = document.createElement('a') const prefix = options.filename || this.state.name || 'carbon' return this.getCarbonImage({ format }) .then(blob => window.URL.createObjectURL(blob)) .then(url => { if (!options.open) { link.download = `${prefix}.${format === 'svg' ? 'svg' : 'png'}` } if ( // isFirefox window.navigator.userAgent.indexOf('Firefox') !== -1 && window.navigator.userAgent.indexOf('Chrome') === -1 ) { link.target = '_blank' } link.href = url document.body.appendChild(link) link.click() link.remove() }) } copyImage = () => this.getCarbonImage({ format: 'blob' }) .then(blob => navigator.clipboard.write([ new window.ClipboardItem({ [blob.type]: blob, }), ]) ) .catch(console.error) updateSetting = (key, value) => { this.updateState({ [key]: value }) if (Object.prototype.hasOwnProperty.call(DEFAULT_SETTINGS, key)) { this.updateState({ preset: null }) } } resetDefaultSettings = () => { this.updateState(DEFAULT_SETTINGS) this.props.onReset() } onDrop = ([file]) => { if (file.type.split('/')[0] === 'image') { this.updateState({ backgroundImage: file.content, backgroundImageSelection: null, backgroundMode: 'image', preset: null, }) } else { this.updateState({ code: file.content, language: 'auto' }) } } updateLanguage = language => { if (language) { this.updateSetting('language', language.mime || language.mode) } } updateBackground = ({ photographer, ...changes } = {}) => { if (photographer) { this.updateState(({ code = DEFAULT_CODE }) => ({ ...changes, code: code.replace(unsplashPhotographerCredit, '') + `\n\n// Photo by ${photographer.name} on Unsplash`, preset: null, })) } else { this.updateState({ ...changes, preset: null }) } } updateTheme = theme => this.updateState({ theme, highlights: null }) updateHighlights = updates => this.setState(({ highlights = {} }) => ({ highlights: { ...highlights, ...updates, }, })) createTheme = theme => { this.props.updateThemes(themes => [theme, ...themes]) this.updateTheme(theme.id) } removeTheme = id => { this.props.updateThemes(themes => themes.filter(t => t.id !== id)) if (this.state.theme.id === id) { this.updateTheme(DEFAULT_THEME.id) } } applyPreset = ({ id: preset, ...settings }) => this.updateState({ preset, ...settings }) format = () => formatCode(this.state.code) .then(this.updateCode) .catch(() => { // create toast here in the future }) handleSnippetCreate = () => this.context.snippet .create(this.state) .then(data => this.props.setSnippet(data)) .then(() => this.props.setToasts({ type: 'SET', toasts: [{ children: 'Snippet created', timeout: 3000 }], }) ) handleSnippetUpdate = () => this.context.snippet.update(this.props.snippet.id, this.state).then(() => this.props.setToasts({ type: 'SET', toasts: [{ children: 'Snippet saved', timeout: 3000 }], }) ) handleSnippetDelete = () => this.context.snippet .delete(this.props.snippet.id) .then(() => this.props.setSnippet(null)) .then(() => this.props.setToasts({ type: 'SET', toasts: [{ children: 'Snippet deleted', timeout: 3000 }], }) ) render() { const { highlights, language, backgroundColor, backgroundImage, backgroundMode, code, exportSize, titleBar, } = this.state const config = getConfig(this.state) const theme = this.getTheme() return (
    {({ canDrop }) => ( {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/} {code != null ? code : DEFAULT_CODE} )}
    ) } } Editor.defaultProps = { onUpdate: () => {}, onReset: () => {}, } export default Editor ================================================ FILE: components/EditorContainer.js ================================================ // Theirs import React from 'react' import Router from 'next/router' import Editor from './Editor' import Toasts from './Toasts' import { useAuth } from './AuthContext' import { THEMES } from '../lib/constants' import { updateRouteState } from '../lib/routing' import { getThemes, saveThemes, clearSettings, saveSettings } from '../lib/util' function onReset() { clearSettings() updateRouteState(Router, {}) if (window.navigator && navigator.serviceWorker) { navigator.serviceWorker.getRegistrations().then(registrations => { registrations.forEach(registration => { registration.unregister() }) }) } } function toastsReducer(curr, action) { switch (action.type) { case 'ADD': { return curr.concat(action.toast) } case 'SET': { return action.toasts } } throw new Error('Unsupported action') } function EditorContainer(props) { const [themes, updateThemes] = React.useState(THEMES) const user = useAuth() React.useEffect(() => { const storedThemes = getThemes(localStorage) || [] if (storedThemes) { updateThemes(currentThemes => [...storedThemes, ...currentThemes]) } }, []) React.useEffect(() => { saveThemes(themes.filter(({ custom }) => custom)) }, [themes]) // XXX use context const [snippet, setSnippet] = React.useState(props.snippet || null) // TODO update this reducer to only take one action const [toasts, setToasts] = React.useReducer(toastsReducer, []) const snippetId = snippet && snippet.id React.useEffect(() => { const snippetPath = '/' + (snippetId || '') if (snippetPath === props.router.asPath) { return } // Reloads only if the snipped.id is different from before. Otherwise returns from above. props.router.push( { pathname: '/[id]', query: { id: snippetId }, }, snippetPath, { shallow: true, scroll: false } ) }, [snippetId, props.router]) function onEditorUpdate(state) { if (user) { return } updateRouteState(props.router, state) saveSettings(state) } return ( <> ) } export default EditorContainer ================================================ FILE: components/ExportMenu.js ================================================ import React from 'react' import { useKeyboardListener, useAsyncCallback } from 'actionsack' import { COLORS, EXPORT_SIZES } from '../lib/constants' import Button from './Button' import Input from './Input' import Popout, { managePopout } from './Popout' import { Down as ArrowDown } from './svg/Arrows' const popoutStyle = { width: '256px', right: 0 } function preventDefault(fn) { return e => { e.preventDefault() return fn(e) } } function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportImage: exp }) { const input = React.useRef() const [exportImage, { loading }] = useAsyncCallback(exp) const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize) const handleExport = format => () => exportImage(format, { filename: input.current && input.current.value }) useKeyboardListener('⌘-⇧-e', preventDefault(handleExport('blob'))) useKeyboardListener('⌘-⇧-s', preventDefault(handleExport('svg'))) return (
    ) } export default managePopout(React.memo(ExportMenu)) ================================================ FILE: components/FontFace.js ================================================ import React from 'react' export default function FontFace(config) { return ( ) } ================================================ FILE: components/FontSelect.js ================================================ import React from 'react' import ListSetting from './ListSetting' import ReferralLink from './ReferralLink' import { FONTS } from '../lib/constants' import { fileToDataURL as blobToUrl } from '../lib/util' const EXTENSIONS = ['.otf', '.ttf', '.woff'] const Font = ({ id, name, link }) => ( {name} {link && ( Purchase )} ) function FontSelect(props) { const inputEl = React.useRef(null) function onChange(id) { if (id === 'upload') { inputEl.current.click() } else { props.onChange(id) } } async function onFiles(e) { const { files } = e.target const name = files[0].name.split('.')[0] const url = await blobToUrl(files[0]) props.onUpload(name, url) } return (
    {Font}
    ) } export default FontSelect ================================================ FILE: components/Footer.js ================================================ import React from 'react' import Link from 'next/link' import { COLORS } from '../lib/constants' const Footer = () => (
    created by{' '} @carbon_app {' '} ¬
    ) export default Footer ================================================ FILE: components/Header.js ================================================ import React from 'react' import Logo from './svg/Logo' const Header = ({ enableHeroText }) => (
    {enableHeroText ? (

    Create and share beautiful images of your source code.
    Start typing or drop a file into the text area to get started.

    ) : null}
    ) export default Header ================================================ FILE: components/ImagePicker.js ================================================ import React from 'react' import ReactCrop, { makeAspectCrop } from 'react-image-crop' import { useLocalStorage } from 'actionsack' import RandomImage from './RandomImage' import PhotoCredit from './PhotoCredit' import Input from './Input' import Toggle from './Toggle' import { Link } from './Meta' import { fileToDataURL } from '../lib/util' import ApiContext from './ApiContext' const getCroppedImg = (imageDataURL, pixelCrop) => { const canvas = document.createElement('canvas') canvas.width = pixelCrop.width canvas.height = pixelCrop.height const ctx = canvas.getContext('2d') return new Promise(resolve => { const image = new Image() image.src = imageDataURL image.onload = () => { ctx.drawImage( image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height ) resolve(canvas.toDataURL('image/jpeg')) } }) } const INITIAL_STATE = { mode: 'file', crop: null, imageAspectRatio: null, pixelCrop: null, photographer: null, dataURL: null, } export default class ImagePicker extends React.Component { static contextType = ApiContext static getDerivedStateFromProps(nextProps, state) { if (state.crop) { // update crop for editor container aspect-ratio change return { crop: makeAspectCrop( { ...state.crop, aspect: nextProps.aspectRatio, }, state.imageAspectRatio ), } } return null } state = INITIAL_STATE selectMode = mode => this.setState({ mode }) onDragEnd = async () => { if (this.state.pixelCrop) { const croppedImg = await getCroppedImg(this.state.dataURL, this.state.pixelCrop) this.props.onChange({ backgroundImageSelection: croppedImg }) } } onCropChange = (crop, pixelCrop) => { this.setState({ crop: { ...crop, aspect: this.props.aspectRatio }, pixelCrop, }) } onImageLoaded = image => { const imageAspectRatio = image.width / image.height const initialCrop = { x: 0, y: 0, width: 100, aspect: this.props.aspectRatio, } this.setState({ imageAspectRatio, crop: makeAspectCrop(initialCrop, imageAspectRatio), }) } handleImageChange = (url, dataURL, photographer) => { this.setState({ dataURL, photographer }, () => { this.props.onChange({ backgroundImage: url, backgroundImageSelection: null, photographer, }) }) } handleURLInput = e => { e.preventDefault() const url = e.target[0].value return this.context .downloadThumbnailImage({ url }) .then(res => res.dataURL) .then(dataURL => this.handleImageChange(url, dataURL)) .catch(err => { if (err.message.indexOf('Network Error') > -1) { this.setState({ error: 'Fetching the image failed. This is probably a CORS-related issue. You can either enable CORS in your browser, or use another image.', }) } }) } uploadImage = async e => { const dataURL = await fileToDataURL(e.target.files[0]) return this.handleImageChange(dataURL, dataURL) } selectImage = async image => { // TODO use React suspense for loading this asset const { dataURL } = await this.context.downloadThumbnailImage(image) this.handleImageChange(image.url, dataURL, image.photographer) if (image.palette && image.palette.length && this.generateColorPalette) { /* * Background is first, which is either the lightest or darkest color * and the rest are sorted by highest contrast w/ the background */ const palette = image.palette.map(c => c.hex) /* * Contributors, please feel free to adjust this algorithm to create the most * readable or aesthetically pleasing syntax highlighting. */ this.props.updateHighlights({ background: palette[0], text: palette[1], variable: palette[2], attribute: palette[3], definition: palette[4], keyword: palette[5], property: palette[6], string: palette[7], number: palette[8], operator: palette[9], meta: palette[10], tag: palette[11], comment: palette[12], }) } } removeImage = () => { this.setState(INITIAL_STATE, () => { this.props.onChange({ backgroundImage: null, backgroundImageSelection: null, }) }) } render() { let content = (
    Upload a background image: {this.state.mode === 'file' ? ( ) : (
    )} {this.state.error && {this.state.error}}
    Or use a random Unsplash image: (this.generateColorPalette = value)} />
    ) if (this.state.dataURL) { content = (
    Background image
    {this.state.photographer && }
    ) } return (
    {content}
    ) } } function GeneratePaletteSetting({ onChange }) { const [enabled, setEnabled] = useLocalStorage('CARBON_GENERATE_COLOR_PALETTE') React.useEffect(() => void onChange(enabled), [enabled, onChange]) return ( ) } ================================================ FILE: components/Input.js ================================================ import React from 'react' import { COLORS } from '../lib/constants' const Input = React.forwardRef( ( { color = COLORS.SECONDARY, align = 'right', width = '100%', fontSize = '12px', label, ...props }, ref ) => ( {label && } ) ) export default Input ================================================ FILE: components/ListSetting.js ================================================ import React from 'react' import Checkmark from './svg/Checkmark' import { COLORS } from '../lib/constants' import { toggle } from '../lib/util' class ListSetting extends React.Component { static defaultProps = { onOpen: () => {}, onClose: () => {}, } state = { isVisible: false } select = id => { if (this.props.selected !== id) { this.props.onChange(id) } } toggle = () => { const handler = this.state.isVisible ? this.props.onClose : this.props.onOpen handler() this.setState(toggle('isVisible')) } renderListItems() { return this.props.items.map(item => (
    {this.props.children(item, this.props.selected)} {this.props.selected === item.id ? : null}
    )) } render() { const { items, selected, title, children } = this.props const { isVisible } = this.state const selectedItem = items.filter(item => item.id === selected)[0] || {} return (
    {title} {children(selectedItem)}
    {this.renderListItems()}
    ) } } export default ListSetting ================================================ FILE: components/LoginButton.js ================================================ import React from 'react' import Link from 'next/link' import firebase, { logout, loginGitHub } from '../lib/client' import Button from './Button' import Popout, { managePopout } from './Popout' import { useAuth } from './AuthContext' function Drawer(props) { return ( ) } function LoginButton({ isVisible, toggleVisibility }) { const user = useAuth() if (!firebase) { return null } return (
    ) } export default managePopout(LoginButton) ================================================ FILE: components/MenuButton.js ================================================ import React from 'react' import Button from './Button' import { COLORS } from '../lib/constants' import * as Arrows from './svg/Arrows' const MenuButton = React.memo(({ name, select, selected, noArrows }) => { return (
    ) }) export default MenuButton ================================================ FILE: components/Meta.js ================================================ import React from 'react' import Head from 'next/head' import { THEMES, THEMES_HASH, COLORS } from '../lib/constants' import Reset from './style/Reset' import Font from './style/Font' import Typography from './style/Typography' const CODEMIRROR_VERSION = '5.65.5' export const HIGHLIGHTS_ONLY = ['shades-of-purple', 'vscode', 'a11y-dark'] const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord', 'synthwave-84'] const CDN_STYLESHEETS = THEMES.filter( t => LOCAL_STYLESHEETS.indexOf(t.id) < 0 && HIGHLIGHTS_ONLY.indexOf(t.id) < 0 ) export function Link({ href }) { return ( ) } export const StylesheetLink = ({ theme }) => { let href if (LOCAL_STYLESHEETS.indexOf(theme) > -1) { href = `/static/themes/${theme}.min.css` } else { const themeDef = THEMES_HASH[theme] href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/${CODEMIRROR_VERSION}/theme/${ themeDef && (themeDef.link || themeDef.id) }.min.css` } return } export const CodeMirrorLink = () => ( ) const title = 'Carbon' const description = 'Carbon is the easiest way to create and share beautiful images of your source code.' export const MetaTags = React.memo(() => ( {title} | Create and share beautiful images of your source code )) export const MetaLinks = React.memo(() => { return ( {LOCAL_STYLESHEETS.map(id => ( ))} {CDN_STYLESHEETS.map(themeDef => { const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/${CODEMIRROR_VERSION}/theme/${ themeDef && (themeDef.link || themeDef.id) }.min.css` return })} ) }) export default React.memo(function Meta() { return ( ) }) ================================================ FILE: components/Overlay.js ================================================ import React from 'react' const Overlay = props => (
    {props.isOver ?
    {props.title}
    : null} {props.children}
    ) export default Overlay ================================================ FILE: components/Page.js ================================================ import React from 'react' import AuthContext from './AuthContext' import Meta from './Meta' import Header from './Header' import Footer from './Footer' import Announcement from './Announcement' import LoginButton from './LoginButton' const COLUMN = ` display: flex; justify-content: center; flex-direction: column; align-items: center; ` class Page extends React.Component { render() { const { children, enableHeroText, flex } = this.props return (
    {children}
    ) } } export default Page ================================================ FILE: components/PhotoCredit.js ================================================ import React from 'react' export default function PhotoCredit({ photographer }) { return (
    Photo by{' '} {photographer.name}
    ) } ================================================ FILE: components/Popout.js ================================================ import React from 'react' import enhanceWithClickOutside from 'react-click-outside' import WindowPointer from './WindowPointer' import { COLORS } from '../lib/constants' import { toggle } from '../lib/util' export const managePopout = WrappedComponent => { class PopoutManager extends React.Component { state = { isVisible: false, } toggleVisibility = () => this.setState(toggle('isVisible')) handleClickOutside = () => this.setState({ isVisible: false }) handleKeyDown = e => { if (e.key === 'Escape') { this.handleClickOutside() } } componentDidMount() { document.addEventListener('keydown', this.handleKeyDown) } componentWillUnmount() { document.removeEventListener('keydown', this.handleKeyDown) } render() { return ( ) } } return enhanceWithClickOutside(PopoutManager) } class Popout extends React.PureComponent { static defaultProps = { borderColor: COLORS.SECONDARY, style: {}, } render() { const { id, children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props if (hidden) { return null } return (
    {children}
    ) } } export default Popout ================================================ FILE: components/Presets.js ================================================ import React from 'react' import Button from './Button' import { COLORS, DEFAULT_PRESETS } from '../lib/constants' import * as Arrows from './svg/Arrows' import Remove from './svg/Remove' const removeButtonStyles = { position: 'absolute', top: '6px', right: '6px', width: '11px', height: '11px', borderRadius: '999px', } const Preset = React.memo(({ remove, apply, selected, preset }) => { const isSelected = preset.id === selected return (
    )}
    ) }) const arrowButtonStyle = { position: 'absolute', top: 0, right: '16px', height: '100%', } const Presets = React.memo( ({ show, create, toggle, undo, presets, selected, remove, apply, applied, contentRef }) => { const customPresetsLength = presets.length - DEFAULT_PRESETS.length const disabledCreate = selected != null return (
    Presets {show && ( )}
    {show && (
    {presets .filter(p => p.custom) .map(preset => ( ))} {customPresetsLength > 0 ?
    : null} {presets .filter(p => !p.custom) .map(preset => ( ))}
    )} {show && applied && (
    Preset applied!
    )}
    ) } ) export default Presets ================================================ FILE: components/RandomImage.js ================================================ import React from 'react' import { useAsyncCallback } from 'actionsack' import { Spinner } from './Spinner' import { useAPI } from './ApiContext' import PhotoCredit from './PhotoCredit' function RandomImage(props) { const cacheRef = React.useRef([]) const [cacheIndex, updateIndex] = React.useState(0) const api = useAPI() const [selectImage, { loading: selecting }] = useAsyncCallback(() => { const image = cacheRef.current[cacheIndex] return api.unsplash.download(image.id).then(data => props.onChange({ ...image, ...data })) }) const [updateCache, { loading: updating, error, data: imgs }] = useAsyncCallback( api.unsplash.random ) const needsFetch = !error && !updating && (!imgs || cacheIndex > cacheRef.current.length - 2) React.useEffect(() => { if (needsFetch) { updateCache() } }, [needsFetch, updateCache]) React.useEffect(() => { if (imgs) { cacheRef.current.push(...imgs) } }, [imgs]) const loading = updating || selecting const cache = cacheRef.current const photographer = cache[cacheIndex] && cache[cacheIndex].photographer const bgImage = cache[cacheIndex] && cache[cacheIndex].dataURL return (
    {loading && }
    {photographer && }
    ) } export default RandomImage ================================================ FILE: components/ReferralLink.js ================================================ import React from 'react' import { COLORS } from '../lib/constants' export default function ReferralLink(props) { return ( {props.children} ) } ================================================ FILE: components/SelectionEditor.js ================================================ import React from 'react' import { useKeyboardListener } from 'actionsack' import Popout from './Popout' import Button from './Button' import ColorPicker from './ColorPicker' import { COLORS } from '../lib/constants' function ModifierButton(props) { return ( ) } function reducer(state, action) { switch (action.type) { case 'BOLD': { return { ...state, bold: !state.bold, } } case 'ITALICS': { return { ...state, italics: !state.italics, } } case 'UNDERLINE': { return { ...state, underline: Number(state.underline + 1) % 3, } } case 'COLOR': { return { ...state, color: action.color, } } } throw new Error('Invalid action') } function SelectionEditor({ onChange }) { const [open, setOpen] = React.useState(false) useKeyboardListener('Escape', () => setOpen(false)) const [state, dispatch] = React.useReducer(reducer, { bold: null, italics: null, underline: null, color: null, }) React.useEffect(() => { onChange(state) }, [onChange, state]) return (
    dispatch({ type: 'BOLD' })}> B dispatch({ type: 'ITALICS' })}> I dispatch({ type: 'UNDERLINE' })} color={state.underline === 2 ? COLORS.RED : undefined} > U
    ) } export default SelectionEditor ================================================ FILE: components/Settings.js ================================================ import React from 'react' import omitBy from 'lodash.omitby' import { useKeyboardListener } from 'actionsack' import ThemeSelect from './ThemeSelect' import FontSelect from './FontSelect' import Slider from './Slider' import Input from './Input' import Toggle from './Toggle' import Popout, { managePopout } from './Popout' import Button from './Button' import Presets from './Presets' import MenuButton from './MenuButton' import { COLORS, DEFAULT_PRESETS, DEFAULT_SETTINGS, DEFAULT_WIDTHS } from '../lib/constants' import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util' import SettingsIcon from './svg/Settings' function KeyboardShortcut({ trigger, handle }) { useKeyboardListener(trigger, handle) return null } function WindowSettings({ onChange, windowTheme, paddingHorizontal, paddingVertical, dropShadow, dropShadowBlurRadius, dropShadowOffsetY, windowControls, widthAdjustment, width, watermark, onWidthChanging, onWidthChanged, }) { return (
    {dropShadow && (
    )} {!widthAdjustment && (
    onChange('width', e.target.value)} width="50%" />
    )}
    ) } function EditorSettings({ onChange, onUpload, font, size, lineHeight, lineNumbers, firstLineNumber, hiddenCharacters, onWidthChanging, onWidthChanged, }) { return (
    {lineNumbers && (
    onChange('firstLineNumber', Number(e.target.value))} width="50%" />
    )}
    ) } const resetButtonStyle = { borderTop: `1px solid ${COLORS.SECONDARY}` } function MiscSettings({ format, reset, applyPreset, settings }) { const input = React.useRef(null) let download try { download = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(settings))}` } catch (error) { // pass } return (
    { const json = await fileToJSON(e.target.files[0]) if (json) { applyPreset(json) } }} />
    ) } const settingButtonStyle = { width: '40px', height: '100%', } const invalidSetting = (v, k) => // Allow highlights in presets and config exports !(Object.prototype.hasOwnProperty.call(DEFAULT_SETTINGS, k) || k === 'highlights') class Settings extends React.PureComponent { state = { presets: DEFAULT_PRESETS, selectedMenu: 'Window', showPresets: true, previousSettings: null, widthChanging: false, } settingsRef = React.createRef() menuRef = React.createRef() componentDidMount() { const storedPresets = getPresets(localStorage) || [] this.setState(({ presets }) => ({ presets: [...storedPresets, ...presets], })) } togglePresets = () => this.setState(toggle('showPresets')) selectMenu = selectedMenu => () => this.setState({ selectedMenu }) handleWidthChanging = () => { const rect = this.settingsRef.current.getBoundingClientRect() this.settingPosition = { top: rect.bottom, left: rect.left } this.setState({ widthChanging: true }) } handleWidthChanged = () => this.setState({ widthChanging: false }) handleChange = (key, value) => { this.props.onChange(key, value) this.setState({ previousSettings: null }) } handleOpenAndFocus = () => { this.props.toggleVisibility() if (!this.props.isVisible) { this.menuRef.current.focus() } } handleReset = () => { this.props.resetDefaultSettings() this.setState({ previousSettings: null }) } handleFontUpload = (id, url) => { this.props.onChange('fontFamily', id) this.props.onChange('fontUrl', url) this.props.toggleVisibility() } getSettingsFromProps = () => omitBy(this.props, invalidSetting) applyPreset = preset => { const previousSettings = this.getSettingsFromProps() this.props.applyPreset(preset) this.setState({ previousSettings }) } undoPreset = () => { this.props.applyPreset({ ...this.state.previousSettings, id: null }) this.setState({ previousSettings: null }) } removePreset = id => { if (this.props.preset === id) { this.props.onChange('preset', null) this.setState({ previousSettings: null }) } this.setState( ({ presets }) => ({ presets: presets.filter(p => p.id !== id) }), this.savePresets ) } createPreset = async () => { const newPreset = this.getSettingsFromProps() newPreset.id = `preset:${generateId()}` newPreset.custom = true newPreset.icon = await this.props.getCarbonImage({ format: 'png', squared: true, exportSize: 1, }) this.props.onChange('preset', newPreset.id) this.setState( ({ presets }) => ({ previousSettings: null, presets: [newPreset, ...presets], }), this.savePresets ) } savePresets = () => savePresets(this.state.presets.filter(p => p.custom)) renderContent = () => { switch (this.state.selectedMenu) { case 'Window': return ( ) case 'Editor': return ( ) case 'Misc': { const settings = this.getSettingsFromProps() return ( ) } default: return null } } render() { const { selectedMenu, showPresets, presets, previousSettings, widthChanging } = this.state const { preset, isVisible, toggleVisibility } = this.props return (
    ) } } export default managePopout(Settings) ================================================ FILE: components/ShareMenu.js ================================================ import React from 'react' import { useAsyncCallback, useOnline as useOnlineListener } from 'actionsack' import { useAPI } from './ApiContext' import { COLORS } from '../lib/constants' import Button from './Button' import Popout, { managePopout } from './Popout' import { Down as ArrowDown } from './svg/Arrows' const popoutStyle = { width: '144px', right: 8 } function ShareMenu({ isVisible, toggleVisibility, tweet, imgur }) { const api = useAPI() const online = useOnlineListener() const [onClickTweet, { loading: tweeting }] = useAsyncCallback(tweet) const [onClickImgur, { loading: imguring }] = useAsyncCallback(imgur) if (!api || !api.tweet) { return null } if (!online) { return null } return (
    ) } export default managePopout(React.memo(ShareMenu)) ================================================ FILE: components/Slider.js ================================================ import React from 'react' import { COLORS } from '../lib/constants' class Slider extends React.Component { static defaultProps = { onMouseDown: () => {}, onMouseUp: () => {}, unit: 'px', } handleChange = e => { this.props.onChange(`${e.target.value}${this.props.unit}`) } render() { const minValue = this.props.minValue || 0 const maxValue = this.props.maxValue || 100 const step = 'step' in this.props ? this.props.step : 1 return (
    ) } } export default Slider ================================================ FILE: components/SnippetToolbar.js ================================================ import React from 'react' import { useAsyncCallback, useOnline, useKeyboardListener } from 'actionsack' import Button from './Button' import Toolbar from './Toolbar' import Input from './Input' import ConfirmButton from './ConfirmButton' import Popout, { managePopout } from './Popout' import { Down as ArrowDown } from './svg/Arrows' import { useAuth } from './AuthContext' import { COLORS } from '../lib/constants' const popoutStyle = { width: '120px', right: -8, top: 40 } function DeleteButton(props) { const [onClick, { loading }] = useAsyncCallback(props.onClick) return ( {loading ? 'Deleting…' : 'Delete'} ) } function DuplicateButton(props) { const [onClick, { loading }] = useAsyncCallback(props.onClick) return ( ) } function SaveButton({ loading, onClick, sameUser }) { useKeyboardListener('⌥-s', e => { if (loading) { return } e.preventDefault() onClick() }) return ( ) } function SnippetToolbar({ toggleVisibility, isVisible, snippet, ...props }) { const user = useAuth() const online = useOnline() const [save, { loading }] = useAsyncCallback(() => { if (snippet) { return props.onUpdate() } else { return props.onCreate() } }) if (!online) return null if (!user) return null const sameUser = snippet && user.uid === snippet.userId return (
    props.onChange('name', e.target.value)} />
    {snippet && !sameUser ? ( ) : ( )} {sameUser && ( )}
    ) } export default managePopout(SnippetToolbar) ================================================ FILE: components/Spinner.js ================================================ import React from 'react' export function Spinner({ size = 24 }) { return (
    ) } ================================================ FILE: components/ThemeSelect.js ================================================ import React from 'react' import Toggle from './Toggle' import { None, BW, Sharp, Boxy } from './svg/WindowThemes' import { COLORS } from '../lib/constants' const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW, boxy: Boxy } class ThemeSelect extends React.Component { select = theme => { if (this.props.selected !== theme) { this.props.onChange('windowTheme', theme) } } renderThemes() { return Object.keys(WINDOW_THEMES_MAP).map(theme => { const Img = WINDOW_THEMES_MAP[theme] const checked = this.props.selected === theme return (
    ) }) } render() { return ( <>
    this.props.onChange('windowControls', v)} /> {this.props.windowControls && (
    {this.renderThemes()}
    )}
    ) } } export default ThemeSelect ================================================ FILE: components/Themes/GlobalHighlights.js ================================================ // Theirs import React from 'react' export default function GlobalHighlights({ highlights }) { return ( ) } ================================================ FILE: components/Themes/ThemeCreate.js ================================================ import React from 'react' import Input from '../Input' import Button from '../Button' import ListSetting from '../ListSetting' import Popout from '../Popout' import ColorPicker from '../ColorPicker' import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants' import { stringifyColor, generateId } from '../../lib/util' const colorPickerStyle = { backgroundColor: COLORS.BLACK, padding: 0, margin: '4px', } const colorPresets = [] const HighlightPicker = ({ title, onChange, color }) => (
    {title}
    ) const ThemeCreate = ({ theme, themes, highlights, create, updateHighlights, name, onInputChange, }) => { const [preset, updatePreset] = React.useState(theme.id) const [highlight, selectHighlight] = React.useState() return (
    Name
    selectHighlight(null)} onChange={id => { updatePreset(id) updateHighlights(themes.find(t => t.id === id).highlights) }} > {({ name }) => {name}}
    {HIGHLIGHT_KEYS.map(key => (
    ))}
    {highlight && ( updateHighlights({ [highlight]: stringifyColor(color) })} /> )}     ) } export default ThemeCreate ================================================ FILE: components/Themes/index.js ================================================ import React from 'react' import dynamic from 'next/dynamic' import GlobalHighlights from './GlobalHighlights' import Dropdown from '../Dropdown' import { managePopout } from '../Popout' import ReferralLink from '../ReferralLink' import ThemeIcon from '../svg/Theme' import RemoveIcon from '../svg/Remove' import { COLORS } from '../../lib/constants' const ThemeCreate = dynamic(() => import('./ThemeCreate'), { loading: () => null, }) const ThemeItem = ({ children, item, isSelected, remove }) => (
    {children} {item.referral && (
    Purchase
    )} {item.custom && !isSelected && (
    { e.stopPropagation() remove(item.id) }} >
    )}
    ) const themeIcon = const getCustomName = themes => `Custom Theme ${themes.filter(({ name }) => name.startsWith('Custom Theme')).length + 1}` class Themes extends React.PureComponent { state = { name: '', } dropdown = React.createRef() static getDerivedStateFromProps(props) { if (!props.isVisible) { return { name: getCustomName(props.themes), } } return null } handleThemeSelected = theme => { if (theme) { const { toggleVisibility, update } = this.props if (theme.id === 'create') { toggleVisibility() this.dropdown.current.closeMenu() } else { update(theme.id) } } } create = theme => { this.props.toggleVisibility() this.props.create(theme) } itemWrapper = props => render() { const { themes, theme, isVisible, toggleVisibility } = this.props const highlights = { ...theme.highlights, ...this.props.highlights } const dropdownValue = isVisible ? { name: this.state.name } : theme const dropdownList = [ { id: 'create', name: 'Create +', }, ...themes, ] return (
    {isVisible && ( this.setState({ name: e.target.value })} /> )}
    ) } } export default managePopout(Themes) ================================================ FILE: components/Toasts.js ================================================ import React from 'react' function Toast(props) { const [display, on] = React.useState(true) function off() { return on(false) } React.useEffect(() => { if (props.timeout) { const to = setTimeout(off, props.timeout) return () => clearTimeout(to) } }, [props.timeout]) return (
    {props.children} {props.closable && ( )}
    ) } function ToastContainer(props) { return (
    {props.toasts ? props.toasts .slice() .reverse() .map(toast => ) : null}
    ) } export default ToastContainer ================================================ FILE: components/Toggle.js ================================================ import React from 'react' import Checkmark from './svg/Checkmark' import { COLORS } from '../lib/constants' class Toggle extends React.PureComponent { static defaultProps = { className: '', } toggle = () => this.props.onChange(!this.props.enabled) render() { return (
    {this.props.enabled ? :
    }
    ) } } export default Toggle ================================================ FILE: components/Toolbar.js ================================================ import React from 'react' const Toolbar = props => (
    {props.children}
    ) export default Toolbar ================================================ FILE: components/WidthHandler.js ================================================ import React from 'react' import { DEFAULT_WIDTHS, COLORS } from '../lib/constants' const { minWidth, maxWidth } = DEFAULT_WIDTHS function clamp(value, min, max) { if (value < min) { return min } if (value > max) { return max } return value } export default function WidthHandler({ innerRef, onChange, onChangeComplete, paddingHorizontal, paddingVertical, }) { const startX = React.useRef(null) const startWidth = React.useRef(null) React.useEffect(() => { function handleMouseMove(e) { if (!startX.current) return const delta = e.pageX - startX.current // leftOrRight === 'left' ? startX - e.pageX : (startX - e.pageX) * -1 const calculated = startWidth.current + delta * window.devicePixelRatio const newWidth = clamp(calculated, minWidth, maxWidth) onChange(newWidth) } window.addEventListener('mousemove', handleMouseMove) return () => window.removeEventListener('mousemove', handleMouseMove) }, [innerRef, onChange]) React.useEffect(() => { function handleMouseUp() { startX.current = null onChangeComplete() } window.addEventListener('mouseup', handleMouseUp) return () => window.removeEventListener('mouseup', handleMouseUp) }, [onChangeComplete]) return ( // eslint-disable-next-line
    { startX.current = e.pageX startWidth.current = innerRef.current.clientWidth }} role="separator" aria-orientation="vertical" aria-valuemin={minWidth} aria-valuemax={maxWidth} >
    ) } ================================================ FILE: components/WindowControls.js ================================================ import React from 'react' import { useCopyTextHandler } from 'actionsack' import { COLORS } from '../lib/constants' import { Controls, ControlsBW, ControlsBoxy } from './svg/Controls' import CopySVG from './svg/Copy' import CheckMark from './svg/Checkmark' const size = 24 const CopyButton = React.memo(function CopyButton({ text }) { const { onClick, copied } = useCopyTextHandler(text) return ( ) }) const WINDOW_THEMES_MAP = { bw: , boxy: } export function TitleBar({ light, value, onChange }) { return (
    onChange(e.target.value)} />
    ) } export default function WindowControls({ theme, copyable, code, light, titleBar, onTitleBarChange, }) { return (
    {WINDOW_THEMES_MAP[theme] || } {copyable && (
    )}
    ) } ================================================ FILE: components/WindowPointer.js ================================================ import React from 'react' export default function WindowPointer({ fromLeft, fromRight, color = '#fff' }) { return (
    ) } ================================================ FILE: components/hooks.js ================================================ import React from 'react' function userTiming({ category, status, value }) { try { window.gtag('event', status, { event_category: 'Performance', event_label: category, value, }) } catch (err) { // pass } } export function usePerformanceMeasurement() { React.useEffect(() => { try { if (window.performance && window.performance.getEntriesByType) { window.performance.getEntriesByType('paint').forEach(entry => { userTiming({ category: 'paint', status: entry.name, value: entry.startTime, }) }) const navigationTiming = window.performance.getEntriesByType('navigation') ? window.performance.getEntriesByType('navigation')[0] : null if (navigationTiming) { userTiming({ category: 'paint', status: 'time to first byte', value: navigationTiming.responseEnd - navigationTiming.requestStart, }) } const javascriptFiles = performance.getEntries().filter(resource => { return resource.name.startsWith(`${location.origin}/_next/static`) }) /* * Tracks total number of javascript used, * helps in tracking the effect of granular chunks work */ userTiming({ category: 'javascript', status: 'script count', value: javascriptFiles.length, }) /* * Tracks total size of javascript used, * helps in tracking the effect of modern/nomodern work */ userTiming({ category: 'javascript', status: 'script size', value: javascriptFiles.reduce((sum, script) => script.encodedBodySize + sum, 0), }) } } catch (error) { console.error(error) } }, []) } ================================================ FILE: components/style/Font.js ================================================ /* * See https://developers.google.com/web/updates/2016/02/font-display and * https://css-tricks.com/font-display-masses/#article-header-id-2 * for `font-display` information */ import React from 'react' export default function Font() { return ( ) } ================================================ FILE: components/style/Reset.js ================================================ import React from 'react' import { COLORS } from '../../lib/constants' export default function Reset() { return ( ) } ================================================ FILE: components/style/Typography.js ================================================ import React from 'react' export default function Typography() { return ( ) } ================================================ FILE: components/svg/Arrows.js ================================================ import React from 'react' const Up = ({ color = 'white' }) => ( ) const Down = ({ color = 'white' }) => ( ) const Right = ({ color = 'white' }) => ( ) export { Up, Down, Right } ================================================ FILE: components/svg/Checkmark.js ================================================ import React from 'react' export default function Checkmark({ width = 18, height = 18, color = '#FFFFFF' }) { return ( ) } ================================================ FILE: components/svg/Controls.js ================================================ import React from 'react' export const Controls = () => ( ) export const ControlsBW = () => ( ) export const ControlsBoxy = () => ( ) ================================================ FILE: components/svg/Copy.js ================================================ import React from 'react' const SVG_RATIO = 0.81 const Copy = ({ size, color }) => { const width = size * SVG_RATIO const height = size return ( ) } Copy.defaultProps = { size: 16, } export default Copy ================================================ FILE: components/svg/Language.js ================================================ import React from 'react' export default function Language() { return ( ) } ================================================ FILE: components/svg/Logo.js ================================================ import React from 'react' export default function Logo() { return ( ) } ================================================ FILE: components/svg/Remove.js ================================================ import React from 'react' export default function Remove({ color = 'black', style }) { return ( ) } ================================================ FILE: components/svg/Settings.js ================================================ import React from 'react' export default function Settings() { return ( ) } ================================================ FILE: components/svg/Theme.js ================================================ import React from 'react' export default function Theme() { return ( ) } ================================================ FILE: components/svg/Watermark.js ================================================ import React from 'react' export default function Watermark({ light }) { return ( ) } ================================================ FILE: components/svg/WindowThemes.js ================================================ import React from 'react' export const Sharp = () => ( ) export const BW = () => ( ) export const None = () => ( ) export const Boxy = () => ( ) ================================================ FILE: cypress/config.json ================================================ { "baseUrl": "https://carbon.now.sh/", "projectId": "p2tbx4", "video": false } ================================================ FILE: cypress/integration/background-color.spec.js ================================================ /* global cy */ import { editorVisible } from '../support' // usually we can visit the page before each test // but these tests use the url, which means wasted page load // so instead visit the desired url in each test describe('background color', () => { const bgColor = '.bg-color-container .bg-color' const picker = '#bg-select-pickers' const openPicker = () => { cy.get(bgColor).click() return cy.get(picker).should('be.visible') } // clicking anywhere else closes it const closePicker = () => cy.get('body').click() it('opens BG color pick', () => { cy.visit('/') openPicker() cy.get('body').click(5, 5, { force: true }) cy.get(picker).should('not.exist') }) it('changes background color to dark red', () => { cy.visit('/') const darkRed = '#D0021B' const darkRedTile = `[title="${darkRed}"]` openPicker() cy.get(picker).find(darkRedTile).click() closePicker() // changing background color triggers url change cy.url().should('contain', '?bg=') // confirm color change cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(208, 2, 27)') }) it('specifies color in url', () => { cy.visit('?bg=rgb(255,0,0)') editorVisible() cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 0)') }) it('enters neon pink', () => { cy.visit('?bg=rgb(255,0,0)') editorVisible() const pink = 'ff00ff' openPicker().find(`input[value="FF0000"]`).clear().type(`${pink}{enter}`) closePicker() cy.url().should(url => expect(decodeURIComponent(url)).to.contain(`?bg=rgba(255,0,255,1)`)) cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 255)') }) }) ================================================ FILE: cypress/integration/basic.spec.js ================================================ /* global cy */ import { editorVisible } from '../support' describe('Basic', () => { it('Should open editor with the correct text encoding', () => { cy.visit( '/?code=%250A%252F*%2520Passing%2520Boolean%2520as%2520method%2520to%2520find%2520returns%2520the%250A%2520*%2520first%2520truthy%2520value%2520in%2520the%2520array!%250A%2520*%252F%250A%255Bfalse%252C%2520false%252C%2520%27%27%252C%2520undefined%252C%2520%27qwijo%27%252C%25200%255D.find(Boolean)%2520%252F%252F%2520%27qwijo%27' ) editorVisible() cy.contains( '.container', "/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, '', undefined, 'qwijo', 0].find(Boolean) // 'qwijo'" ) }) it('Should open editor with the correct text even with bad URI component', () => { cy.visit('/?code=%25') editorVisible() cy.contains('.container', '%') }) it('Should clear editor state with Shift+Cmd+\\', () => { cy.visit('/?bg=red') cy.get('body').trigger('keydown', { key: '\\', metaKey: true, shiftKey: true }) cy.location().its('pathname').should('eq', '/') cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(171, 184, 195)') }) it("Should contain id's for CLI integrations to use", () => { cy.get('#export-container').should('have.length', 1) cy.get('.export-container').should('have.length', 1) cy.get('#export-menu').should('have.length', 1) cy.get('#export-menu').click() cy.get('#export-png').should('have.length', 1) cy.get('#export-svg').should('have.length', 1) }) /* * This test should only be run locally since it actually downloads a file * for verification. */ it.skip('Should download a PNGs and SVGs', () => { cy.visit('/') editorVisible() cy.contains('span[type="button"]', 'Save Image').click() cy.get('#downshift-2-item-0').click() cy.wait(1000) cy.contains('span[type="button"]', 'Save Image').click() cy.get('#downshift-2-item-1').click() cy.wait(1000) }) }) ================================================ FILE: cypress/integration/embed.spec.js ================================================ /* global cy */ describe('Embed', () => { it('Should render the Carbon editor but no toolbar', () => { cy.visit('/embed') cy.get('.export-container').should('be.visible') cy.get('.export-menu-container').should('not.exist') }) }) ================================================ FILE: cypress/integration/gist.spec.js ================================================ /* global cy Cypress */ import { editorVisible } from '../support' describe('Gist', () => { const test = Cypress.env('CI') ? it.skip : it test('Should pull text from the first Gist file', () => { cy.visit('/3208813b324d82a9ebd197e4b1c3bae8') editorVisible() cy.contains('Y-Combinator implemented in JavaScript') cy.get('#downshift-input-JavaScript').should('have.value', 'JavaScript') }) const pages = ['/', '/embed/', '/82d742f4efad9757cc826d20f2a5e5af'] pages.forEach(page => { test(`${page} should not contain a query string in the url`, () => { cy.visit(page) cy.url().should('not.contain', '?') }) }) }) ================================================ FILE: cypress/integration/localStorage.spec.js ================================================ /* global cy */ import { editorVisible } from '../support' // usually we can visit the page before each test // but these tests use the url, which means wasted page load // so instead visit the desired url in each test describe('localStorage', () => { const themeDropdown = () => cy.get('.toolbar .dropdown-container').first() const pickTheme = (name = 'Blackboard') => themeDropdown() .click() .contains(name) .click() it.skip('is empty initially', () => { cy.visit('/') editorVisible() cy.window() .its('localStorage') .should('have.length', 0) }) it('saves on theme change', () => { cy.visit('/') editorVisible() pickTheme('Blackboard') themeDropdown() .click() .contains('Blackboard') cy.wait(1500) // URL updates are debounced cy.window() .its('localStorage.CARBON_STATE') .then(JSON.parse) .its('theme') .should('equal', 'blackboard') // visiting page again restores theme from localStorage cy.visit('/') pickTheme('Cobalt') cy.wait(1500) // URL updates are debounced cy.url().should('contain', 't=cobalt') }) }) ================================================ FILE: cypress/integration/security.spec.js ================================================ /* global cy */ import { editorVisible } from '../support' describe('security', () => { it('should not alert from bg query parameter', () => { const stub = cy.stub() cy.on('window:alert', stub) // https://github.com/carbon-app/carbon/issues/192 cy.visit(`?bg=rgba(171, 184, 195, 1) ================================================ FILE: docs/README.bn.md ================================================

    maintained with Ranger সকল অবদানকারীগন MIT লাইসেন্স FOSSA স্ট্যাটাস



    ## ভূমিকা আপনি অবশ্যই টুইটারে [নানান](https://twitter.com/dan_abramov/status/890191815567175680) [কোড](https://twitter.com/reactjs/status/890511993261654017) [স্ক্রিনশট](https://twitter.com/notquiteleo/status/873483329345028096) দেখেছেন। এইসব কোডের কোয়ালিটি সাধারণত চমৎকার হলেও, আমাদের মনে হয়েছে এইগুলো আরও নান্দনিক হতে পারত। Carbon আপনার সোর্স কোড থেকে সুন্দর ছবি তৈরি এবং সেটা সকলের কাছে ছড়িয়ে দেয়া সহজ করে দেয়। তাহলে আর দেরি কেন? যান আপনার এই নতুন ডিজাইন স্কিল দিয়ে আপানার ফলোয়ারদের মুগ্ধ করুন।

    Carbon উদাহরণ

    ## বৈশিষ্ট্য - **কাস্টমাইজেশন**. আপনার ছবির সিনট্যাক্স থিম, ফন্ট, এবং আরও অনেক কিছু পরিবর্তন করতে পারছেন। - **দ্রুত শেয়ার করুন**. মাত্র একটি ক্লিকে আপনার ছবি সংরক্ষন অথবা লিঙ্ক তৈরি করতে পারছেন। - **স্নিপেট সংরক্ষণ করুন**. আকাউন্ট তৈরি করে আপানর স্নিপেট প্রবর্তিতে ব্যাবহারের জন্য সংরক্ষণ করুন। শেয়ার করা স্নিপেট Twitter কিংবা Slack-এ স্বয়ংক্রিয়ভাবে উন্মোচিত হবে। ## ব্যবহার #### ইম্পর্ট Carbon-এ আপনার কোড ইম্পর্ট করার বেশ কিছু উপায় আছে: - Editor-এ আপানার ফাইল ড্রপ করতে পারবেন - URL-এ Github gist IU যুক্ত করতে পারবেন (যেমন [`carbon.now.sh/<আপানার gist_id>`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - অথবা, Editor-এ সরাসরি টাইপ করা শুরু করুন #### কাস্টমাইজেশন আপনার কোড Carbon-এ আনা হলে, আপনার ছবির সিনট্যাক্স থিম, ব্যাকগ্রাউন্ড কালার, উইন্ডো থিম, পাডিং, শ্যাডো, ফন্ট ইত্যাদি কাস্টমাইজ বা পরিবর্তন করত পারবেন। #### এক্সপোর্ট এবং শেয়ার করা আপনার ছবি কাস্টমাইজ করার পর, আপনার স্নিপেট শেয়ার করার একাধিক উপায় আছে ##### সংরক্ষিত স্নিপেট তৈরি করা একটি সংরক্ষিত স্নিপেট শেয়ার করলে সেটির ছবি স্বয়ংক্রিয়ভাবে Twitter এবং Slack-এর মত প্লাটফরমে উন্মোচিত হবে। এইভাবে অন্যান্য ব্যবহারকারীরা আপনার সৃষ্টি দেখতে পারবে, সাথে সাথে লিঙ্ক্যটির মাধ্যমে তারা সোর্স কোডও দেখার সুযোগ পাবে। আরো চমৎকার, আপনার যদি কোন পরিবর্তন করার প্রয়োজন পরে, লিঙ্কটিতে প্রবেশ করে আপনি সরাসরি স্নিপেটটি পরিবর্তন করতে পারবেন। সংরক্ষিত স্নিপেট তৈরি করতে: ১। "Sign in/Sign up" বাটন ব্যাবহার করে লগইন করুন ২। সাধরনত আপনি যেভাবে এডিট করে থাকেন, থিক তেমনেই এডিট করলেই আপানার স্নিপেট সংরক্ষিত হয়ে যাবে। ৩। আপনার ব্রাউজার উইন্ডো বা এড্রেস বার থেকে URL-টি কপি করে শেয়ার করুন! ##### স্নিপেট এম্বেড করা এইটি আপনার নিজেশ্য ওয়েবসাইট অথবা ব্লগে Carbon শেয়ার করার সুপারিশকৃত উপায়। পাঠকরা এমনকি একটি বাটন ক্লিক করেই আপনার কোড কপি করতে পারবে। আপনি আপানার ওয়েবসাইটে যেকোনো Carbon স্নিপেট এম্বেড করতে সরাসরি `carbon.now.sh/embed` URL-টি ব্যাবহার করুন। Medium-এর মত প্লাটফরমের জন্য, "Copy Menu"-টি আপনাকে দ্রুত সঠিক iFrame স্নিপেট, অথবা এনকোডেড URL কপি করতে দেয়। সবশেষে, সংরক্ষিত স্নিপেটটি অথবা Gihub gists এম্বেড করতে `carbon.now.sh/embed/:id` URL-টি ব্যাবহার করতে পারছেন। ##### টুইট বাটন ব্যাবহার করুন টুইট বাটন টুইটারে ছবি করার সাথে সাথে `alt` টেক্সট সঠিক ভাবে সংযোজন করবে যাতে আপনার ছবি অধিগম্য হয়। তবে আপনি নিজে ছবি টুইট করতে চাইলে, [how to make your Twitter images accessible](https://help.twitter.com/en/using-twitter/picture-descriptions) দেখে আসুন। ##### সরাসরি ছবি ডাউনলোড করুন Carbon থেকে আপনার ছবি PNG এবং SVG ফরম্যাটে ডাউনলোড করতে পারবেন। তাছাড়া `Export → Open` কিল্ক করে ছবিটি সরাসরি আপনার ব্রাউজারে দেখতে পারবেন। সবশেষে `Copy → Image` গিয়ে, আপনি ছবিটি Carbon থেকে সরাসরি আপনার ক্লিপবয়ারডে নিতে পারছেন। #### ডেক্সটপে Carbon ইন্সটল করুন (অফলাইন) আপনি যদি গুগল ক্রোম অথবা অন্য কনো প্রোগ্রেসিভ ওয়েব অ্যাপ সাপোর্ট করা ব্রাউজার ব্যাবহার করেন, আপনি অফলাইন ব্যাবহারের জন্য Carbon ইন্সটল করেতে পারছেন নিচের উপায়ে: 1. [carbon.now.sh](https://carbon.now.sh) ভিজিট করুন 2. ব্রাউজারের সেটিংস মেনু ক্লিক করুন 3. "Install Carbon..." ক্লিক করুন ## কমুইনিটি আমাদের দুর্দান্ত কমুইনিটি দারা তৈরি করা প্রোজেক্টগুল দেখে আসুন: ##### এডিটর প্লাগিন - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Open up the selection in your current IntelliJ IDEA file in Carbon through a context menu - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Open up your current Atom file in Carbon with `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Open up your current VS Code file in Carbon with command `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Open up the selection in your current Sublime Text 3 file with a custom bound key - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Open up the selection in your current Vim/Neovim using function `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Open up the selection in your current Emacs using interactive function `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Open up your current selection in `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - This Xcode extension enables you to export a code selection as a Carbon snippet in a single action ##### টুলস - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Open a file in Carbon or download it directly using `carbon-now`, featuring an interactive mode, selective highlighting and more - [CodeExpander](https://codeexpander.com) - A smart GitHub gist client with the TextExpander features - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Export multiple Carbon code snippets from `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - A Telegram chatbot which takes in a code snippet or gist URL and generates an Carbon image - [R `carbonate`](https://yonicd.github.io/carbonate/) - Iteratively manipulate image aesthetics in `R` and either open in Carbon or download directly. - [Carbon for Slack](https://github.com/faisalsayed10/carbon-slack) - Use Carbon directly in Slack. Just invoke the `/carbon` command. ##### উদ্ধৃতি - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - a computer science textbook by Sarbo Roy. ## লেখক Carbon প্রোজেক্ট যাদের জন্য সম্ভব হয়েছে: - Mike Fix (মাইক ফিক্স) ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis (ব্রাএন ডেনিস) ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer (জেইক ডেক্সহেইমার) ([@jakedex](https://github.com/jakedex)) #### লাইসেন্স [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## অবদান এবং সমর্থন করুন Pull requests স্বাগত জানানো হচ্ছে। আরো বিস্তারিত জানার জন্য অনুগ্রহ করে আমাদের [contributing guidelines](/.github/CONTRIBUTING.md) দেখুন। ### স্পনসর এবং ব্যাকার্স [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) [![Powered by Vercel](https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg)](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) ### ধন্যবাদ Carbon-এর হোস্টিং স্পন্সর করার জন্য [▲ Vercel](https://vercel.com?utm_source=carbon-app&utm_campaign=oss)-কে ধন্যবাদ জানাই। ### সকল অবদানকারীগন ধন্যবাদ জানাই এই সব বিস্ময়কর মানুষদের ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
    briandennis
    briandennis
    💻 📖 🚇 👀    		 mfix22
    mfix22
    💬 💻 🤔    		 jakedex
    jakedex
    💬 💻 🎨 📹    		 andrewda
    andrewda
    💬 💻 🐛 👀    		 yeskunall
    yeskunall
    💻 📖 🔧 🐛    		 stoshfabricius
    stoshfabricius
    💻    		 jkling38
    jkling38
    📖
    otobrglez
    otobrglez
    💻    		 darahak
    darahak
    📖    		 dom96
    dom96
    💻    		 elrumordelaluz
    elrumordelaluz
    💻    		 cjb
    cjb
    💻    		 Krzysztof-Cieslak
    Krzysztof-Cieslak
    💻    		 fernahh
    fernahh
    📖
    g3r4n
    g3r4n
    💻    		 Mat Gadd
    Mat Gadd
    🐛 💻    		 Brad Davies
    Brad Davies
    🐛 💻    		 Rafael Câmara
    Rafael Câmara
    💻    		 Gleb Bahmutov
    Gleb Bahmutov
    ⚠️ 🔧    		 Iván Munguía
    Iván Munguía
    💻    		 Dillon Mulroy
    Dillon Mulroy
    💻
    Nihad Abbasov
    Nihad Abbasov
    💻    		 Bruno C. Couto
    Bruno C. Couto
    💻    		 Mark Molnar
    Mark Molnar
    💻    		 Takahiko Inayama
    Takahiko Inayama
    💻    		 François Martin
    François Martin
    💻    		 Raphael Amorim
    Raphael Amorim
    💻    		 Camron Flanders
    Camron Flanders
    💻
    Eric Adamski
    Eric Adamski
    💻    		 Winner Crespo
    Winner Crespo
    💻 🎨    		 Milos
    Milos
    💻 🔧 📖 🌍    		 Yashu Mittal
    Yashu Mittal
    💻    		 Rachel M. Carmena
    Rachel M. Carmena
    📖    		 Miguel Salazar
    Miguel Salazar
    📖 🌍    		 Vyom Jain
    Vyom Jain
    📖 🌍
    racaljk
    racaljk
    🌍    		 Sean
    Sean
    💻    		 Izabela Borges
    Izabela Borges
    🌍    		 Shinil M S
    Shinil M S
    🌍    		 Berke Atac
    Berke Atac
    🌍    		 LEE YONGJUN
    LEE YONGJUN
    🌍    		 Matthew Nielsen
    Matthew Nielsen
    💻
    Boy
    Boy
    📦    		 Vetrivel Chinnasamy
    Vetrivel Chinnasamy
    🌍    		 Farzad YZ
    Farzad YZ
    💻 🤔    		 Yannick Loriot
    Yannick Loriot
    🌍    		 Joel Hanson
    Joel Hanson
    💻    		 Muhammad Muzzammil
    Muhammad Muzzammil
    💻    		 souppower
    souppower
    🚇
    Masato Urai (@uraway_)
    Masato Urai (@uraway_)
    🌍    		 Fernando
    Fernando
    🌍    		 Megha Sachdev
    Megha Sachdev
    💻 ⚠️    		 Anudeep Reddy
    Anudeep Reddy
    🚇    		 Munieru
    Munieru
    🌍    		 Adam Lusted
    Adam Lusted
    💻    		 Jose Noriega
    Jose Noriega
    🌍
    Merlin Fuchs
    Merlin Fuchs
    🌍    		 Ramy Majouji
    Ramy Majouji
    💻    		 Viktor Nemes
    Viktor Nemes
    💻    		 Eric Bailey
    Eric Bailey
    💻    		 Nazeefa
    Nazeefa
    🌍    		 Pratik Butani
    Pratik Butani
    📝    		 Bakti Aditya
    Bakti Aditya
    💻
    Caleb Taylor
    Caleb Taylor
    💻    		 Rogério Munhoz
    Rogério Munhoz
    💻    		 Technoknol
    Technoknol
    💻    		 Tymoteusz Makowski
    Tymoteusz Makowski
    💻    		 Nisar Hassan Naqvi
    Nisar Hassan Naqvi
    🐛    		 Ilyas Karim
    Ilyas Karim
    🐛    		 Nick Fix
    Nick Fix
    🤔
    Melanie Sumner
    Melanie Sumner
    🤔    		 aluc
    aluc
    💻    		 B. Mearns
    B. Mearns
    🤔    		 Peng Jie
    Peng Jie
    💻    		 Binyamin Aron Green
    Binyamin Aron Green
    💻    		 Michal
    Michal
    🌍    		 Quinn Blenkinsop
    Quinn Blenkinsop
    💻
    Dwiferdio Seagal Putra
    Dwiferdio Seagal Putra
    💻    		 Ashley Woodall Clark
    Ashley Woodall Clark
    💻    		 Tim Wienk
    Tim Wienk
    🌍    		 George McCarron
    George McCarron
    📖    		 Erwin Rahayu
    Erwin Rahayu
    🌍 📖    		 Luca
    Luca
    💻    		 Andrew Hayes
    Andrew Hayes
    💻
    Bereket Semagn
    Bereket Semagn
    💻    		 Lorenzo Lancia
    Lorenzo Lancia
    🌍    		 Guy Adler
    Guy Adler
    🌍    		 Dan Bamikiya
    Dan Bamikiya
    🤔    		 kewang
    kewang
    🌍    		 Rizda Dwi Prasetya
    Rizda Dwi Prasetya
    🖋    		 AbreuY
    AbreuY
    🌍
    >_Rizky.dev
    >_Rizky.dev
    🌍 📖    		 Abidemi Harry
    Abidemi Harry
    💻    		 Marco
    Marco
    🌍    		 Sam Robbins
    Sam Robbins
    📖    		 alceil
    alceil
    💻    		 hatsu
    hatsu
    💻    		 Praveen Kumar Purushothaman
    Praveen Kumar Purushothaman
    🌍
    ================================================ FILE: docs/README.br.pt.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introdução Sabe [todos aqueles](https://twitter.com/dan_abramov/status/890191815567175680) [prints](https://twitter.com/reactjs/status/890511993261654017) [de código](https://twitter.com/notquiteleo/status/873483329345028096) que você vê no Twitter? Apesar do código geralmente ser impressionante, nós vimos que a parte estética podia ser melhorada. Carbon facilita bastante criar e compartilhar imagens muito boas do seu código fonte. Então o que você está esperando? Vai lá impressionar todos os seus seguidores com esse design foda que você conseguiu aqui!

    Carbon example

    ## Funcionalidades - **Importar de um gist do GitHub**. É só colocar o id de um gist do GitHub no fim da url; - **Customização**. Personalize coisas como o tema usado no editor de acordo com a sintaxe da linguagem, o estilo de janela e mais; - **Compartilhe rapidamente**. Salve sua imagem ou tweet o link com a imagem em um clique. ## Uso #### Importar Existem alguns jeitos diferentes de importar código fonte para o Carbon: - Arraste um arquivo para o editor; - Cole o id de um gist do GitHub no fim da url (e.g. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)); - Copie e cole o trecho de código diretamente no editor. #### Customização Assim que você colocar o trecho de código no editor do Carbon, você pode personalizar a imagem mudando o tema e sintaxe, cor de fundo, tema da janela, e o espaçamento entre a imagem do editor e as bordas. #### Exportar/Compartilhar Depois que você customizar a sua imagem, você pode tweetar um link para a imagem ou salvá-la diretamente. ## Comunidade Confira os projetos top da nossa comunidade: ##### Plugins para editores de texto - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Selecione o trecho de código aberto no seu IntelliJ IDEA e o use o botão direito para abrir o menu de opções onde você pode acionar o Carbon; - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Abra o arquivo atual do seu Atom no Carbon com o comando `shift-cmd-A`; - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Abra seu arquivo do VS Code no Carbon usando o comando `carbon`; - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Selecione o trecho de código aberto no seu Sublime Text 3 com um atalho de teclado customizado; - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Selecione o trecho de código aberto no seu Vim/Neovim usando a função `CarbonNowSh()`; - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Selecione o trecho de código aberto no seu Emacs usando a função interativa `carbon-now-sh`. ##### CLIs - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Abra um arquivo no Carbon ou faça download da imagem diretamente com `carbon-now`, apresentando um modo interativo, seleção destacada e muito mais. ##### Bibliotecas - [R `carbonate`](https://yonicd.github.io/carbonate/) - Manipule iterativamente a estética da imagem em `R` e abra no Carbon ou faça download diretamente. ##### Livros Didáticos - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - um livro didático de ciência da computação escrito por Sarbo Roy. ## Autores Carbon é um projeto feito pela - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licença [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribua PRs são bem vindos! Por favor leia nosso [CONTRIBUTING.md](/.github/CONTRIBUTING.md) para mais detalhes. ### Agradecimentos [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) por patrocinar a hospedagem do Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Todos os contribuidores Agradecemos imensamente a todas essas pessoas maravilhosas pela grande ajuda ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.cn.zh.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## 简介 你见过推特上面的 [这些](https://twitter.com/dan_abramov/status/890191815567175680) [代码](https://twitter.com/reactjs/status/890511993261654017) [图片](https://twitter.com/notquiteleo/status/873483329345028096) 吗? 虽然这些代码令人印象深刻，但从审美角度来说还有提升空间。Carbon 能够轻松地将你的源码生成漂亮的图片并分享。还等什么呢？用这个新发现的美化工具秀给你的 followers 看吧。

    Carbon example

    ## 特性 - **定制化**：定制选项包括图片的语法主题、窗口样式等 - **快速分享**：一键生成图片并分享 - **从 GitHub gist 导入**：只需要在 url 后面加上 GitHub gist id ## 使用 #### 导入 有几种不同的方法可以将代码导入到 Carbon： - 把文件拖放到编辑器中 - 在 carbon url 后面添加 GitHub gist id （比如 [`carbon.now.sh/<你的_gist_id>`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)） - 直接粘贴代码 #### 定制化 当你把代码导入到 Carbon 后，你可以定制生成的代码图片。定制选项包括语法主题、背景颜色、窗口主题、以及 padding 距离。 #### 导出/分享 当你定制完图片样式后，可以分享到推特上面，或者直接保存。 如果你通过 "Tweet" 按钮分享，Carbon 将自动设置你的图片为公开访问。不过如果你想手动分享图片，可以查看 [如何设置 Twitter 图片公开访问](https://help.twitter.com/en/using-twitter/picture-descriptions)。 如果你在文章中添加 Carbon 图片，注意到图片中的源代码对于无障碍技术来说是不可见的，比如无法放大字号或复制。可以考虑新增一个元素展示文本形式的源代码，比如在图片下方加一个 [详细信息展现元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details)。 #### 安装 Carbon 桌面客户端（离线） 如果你使用的是 Google Chrome 或别的支持 PWA 技术的浏览器，你可以安装 Carbon 并离线使用： 1. 访问 [https://carbon.now.sh](https://carbon.now.sh) 2. 点击浏览器的设置按钮 3. 点击 "安装 Carbon..." ## 社区 浏览社区中的这些优秀项目： ##### 编辑器插件 - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - 在 IntelliJ IDEA 中通过右键菜单导入选中的代码到 Carbon - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - 在 Atom 中通过 `shift-cmd-A` 快捷键导入当前文件到 Carbon - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - 在 VS Code 中通过 `carbon` 命令导入当前文件到 Carbon - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - 在 Sublime Text 3 中通过自定义快捷键导入选中的代码到 Carbon - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - 在 Vim/Neovim 中通过 `CarbonNowSh()` 函数导入选中的代码到 Carbon - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - 在 Emacs 中通过 `carbon-now-sh` 交互函数导入选中的代码到 Carbon - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - 在 `carbon.now.sh` 中打开选中的代码 - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - 这个 Xcode 扩展程序能让你将选中的代码一键导出成 Carbon 片段 ##### 工具 - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - 用 `carbon-now` 命令在 Carbon 中打开一个文件或者直接下载它，包含交互式选项、可选高亮等功能 - [CodeExpander](https://codeexpander.com) - 是一个智能并具有像 TextExpander 特性的 GitHub Gist 客户端 - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - 从 `Xcode Playground` 导出多个 Carbon 代码片段。 ##### 库 - [R `carbonate`](https://yonicd.github.io/carbonate/) - 用 `R` 脚本迭代处理图片样式并在 Carbon 中打开或直接下载。 ##### 书籍 - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy 写的一本计算机科学书. ## 项目作者 Carbon 项目由 TA 们发起： - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### 许可 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## 贡献代码 欢迎 PR！请查看 [贡献指南](/.github/CONTRIBUTING.md) 了解详情。 ### 赞助商 你的公司在用 Carbon 吗？考虑一下为此项目的新功能开发、bug 修复等提供赞助。 [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### 赞助者 喜欢用 Carbon 吗？考虑一下为此项目的新功能开发或改进提供赞助。 ### 感谢 [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) 赞助了 Carbon 的服务托管。 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### 贡献者 感谢所有这些优秀的贡献者们 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.de.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Einführung Kennen wir nicht alle [diese](https://twitter.com/dan_abramov/status/890191815567175680) [Screenshots](https://twitter.com/reactjs/status/890511993261654017) [von Code](https://twitter.com/notquiteleo/status/873483329345028096), die wir ständig auf Twitter sehen? Obwohl der Code gewöhnlich beeindruckend ist, haben wir im ästhetischen Bereich etwas Raum für Verbesserung gesehen. Carbon ermöglicht das Erstellen und Teilen wunderschöner Bilder deines Quellcodes. Worauf wartest du also? Beeindrucke deine Follower mit deinen neu gefundenen Design Fähigkeiten.

    Carbon example

    ## Feature - **Importiere Github Gists**. Hänge einfach eine Github Gist ID der URL an - **Anpassungen**. Wähle zwischen unterschiedlichen Syntax Themes, Window Styles und vielen weiteren Dingen - **Teile sofort**. Speichere dein Bild oder tweete einen Link mit nur einem Klick ## Anwendung #### Import Code kann man in Carbon auf unterschiedliche Weisen importieren: - Schiebe eine Datei in den Editor - Hänge eine Github Gist ID an die URL an (z.B. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Füge Code direkt aus der Zwischenablage ein #### Anpassung Wenn du deinen Code vollständig in Carbon importiert hast, kannst du dein Bild anpassen, indem du Syntax Theme, Hintergrundfarbe, Window Theme, Padding, usw. veränderst. #### Exportieren/Teilen Hast du dein Bild vollständig angepasst, kannst du entweder einen Link zum Bild tweeten, oder es direkt herunterladen. ## Community Schau dir auch diese Projekte näher an, die unsere tolle Community hervorgebracht hat: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Öffne die Auswahl deiner aktuellen IntelliJ IDEA Datei in Carbon mit Hilfe eines Context Menüs - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Öffne deine aktuelle Atom Datei in Carbon via `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Öffne deine aktuelle VS Code Datei in Carbon mit Hilfe des `carbon` Befehls - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Öffne die Auswahl deiner aktuellen Sublime Text 3 Datei mit Hilfe eines Tastenkürzels deiner Wahl - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Öffne die Auswahl aus Vim/Neovim mit Hilfe der Funktion `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Öffne die Auswahl deines aktuelles Emacs mit Hilfe der interaktiven Funktion `carbon-now-sh` ##### CLIs - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Öffne eine Datei in Carbon oder lade sie direkt mit dem Befehl `carbon-now` herunter. Weitere Features sind unter anderem ein interaktiver Modus, selektives Highlighting und vieles mehr ##### Libraries - [R `carbonate`](https://yonicd.github.io/carbonate/) - Manipuliere auf eine interaktive Weise das Aussehen von Bildern mit `R` und öffne diese in Carbon oder lade sie direkt herunter. ##### Lehrbücher - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - ein Informatik Lehrbuch von Sarbo Roy. ## Autoren Carbon ist ein Projekt von - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Lizenz [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Mitwirken Pull Requests sind willkommen! Bitte lese hierzu unsere [CONTRIBUTING.md](/.github/CONTRIBUTING.md) für mehr Details. ### Danke an [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) für das Sponsoring von Carbon’s Hosting. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Alle Mitwirkende Ein Danke geht an all diese wunderbaren Menschen ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.es.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introducción ¿Conoces [todas](https://twitter.com/dan_abramov/status/890191815567175680) [esas](https://twitter.com/reactjs/status/890511993261654017) [capturas de pantalla](https://twitter.com/notquiteleo/status/873483329345028096) que ves en Twitter? Aunque el código es generalmente impresionante, vimos una oportunidad de mejora en el área de estética. Carbon hace que sea fácil crear y compartir bellas imágenes de su código. Entonces, ¿qué esperas? Ve a impresionar a todos tus seguidores con tu nueva destreza de diseño.

    Carbon example

    ## Características - **Personalización**. Personaliza cosas como el tema de sintaxis de tu imagen, estilo de fuente y más. - **Comparte rápidamente**. Guarda tu imagen o enlace con un solo clic. - **Guarda tus fragmentos de código**. Crea una cuenta para guardar tus fragmentos de código para más adelante. Los fragmentos de código que compartas en Twitter y Slack se mostrarán automáticamente. ## Uso #### Importar Hay formas diferentes de importar código en Carbon: - Coloca un archivo en el editor. - Agrega un ID de GitHub gist a la URL (por ejemplo, [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)). - Pega tu código directamente. #### Personalización Una vez que tenga todo su código en Carbon, puedes personalizar tu imagen cambiando el tema de sintaxis, el color de fondo, el tema de la ventana, relleno, sombras, fuentes y más. #### Exportar/Compartir Después de que hayas personalizado tu fragmento de código, puedes compartirlo en un Tweet haciendo un enlace a la imagen o guardar la imagen directamente. ##### Genera fragmentos de código para guardar Cuando compartes un fragmento de código guardado, la imagen se mostrará automáticamente en plataformas como Twitter y Slack. De esta manera, otros usuarios pueden ver tu creación, además de darles acceso al código fuente a través del enlace. Mejor aún, si deseas hacer algún ajuste, puedes entrar directamente al enlace para editar el fragmento de código. Para crear un fragmento de código que puedas guardar: 1. Inicia sesión usando el botón de "Sign In/Sign Up". 2. Edita tu fragmento de código como normalmente lo harías, este se guardará automáticamente. 3. ¡Copia la URL de tu navegador y compártela! ##### Embeber un fragmento de código Este es el método recomendado para compartir Carbon en tu propio sitio web o blog. Los lectores incluso pueden copiar el código con hacer clic en un botón. Tu puedes insertar cualquier fragmento de código de Carbon directamente en tu sitio web usando la URL `carbon.now.sh/embed`. El "Menú de copiado" te permite copiar rápidamente el fragmento de iFrame correcto o la URL codificada para ser usada en plataformas como Medium. Finalmente, también puedes insertar tus fragmentos de código guardados o GitHub gists usando `carbon.now.sh/embed/:id`. ##### Usa el botón de Tweet El botón de Tweet no solo compartirá la imagen en Twitter, también codificará correctamente el texto alternativo (propiedad `alt`) para asegurar que tus imágenes son accesibles. Sin embargo, si deseas publicar la imagen en Twitter por tu cuenta, te recomendamos consultar [cómo publicar imágenes accesibles](https://help.twitter.com/es/using-twitter/picture-descriptions). ##### Descarga la imagen directamente Carbon permite descargar tus imágenes en formato PNG y SVG. También puedes hacer clic en `Export → Open` para abrir tu imagen directamente en el navegador. Por último, puedes copiar directamente la imagen en el portapapeles haciendo click en `Copy → Image`. #### Instalación de Carbon para escritorio (Sin conexión) Si estás utilizando Google Chrome u otro navegador que soporte aplicaciones web progresivas, puedes instalar Carbon para usarlo sin conexión siguiendo estas instrucciones: 1. Visitar [https://carbon.now.sh](https://carbon.now.sh). 2. Abrir el menú de configuración de tu navegador. 3. Hacer clic en "Instalar Carbon...". ## Comunidad Echa un vistazo a estos proyectos que nuestra increíble comunidad ha creado: ##### Complementos del editor - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Abra la selección en su archivo actual IntelliJ IDEA en Carbon a través de un menú contextual. - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Abra su archivo Atom actual en Carbon con `shift-cmd-A`. - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Abra su archivo VS Code actual en Carbon con el comando `carbon`. - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Abra la selección en su archivo actual de Sublime Text 3 con una clave personalizada. - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Abra la selección en su Vim / Neovim actual usando la función `CarbonNowSh ()`. - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Abra la selección en su Emacs actual usando la función interactiva `carbon-now-sh`. - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Abra su selección actual en `carbon.now.sh`. - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Esta extensión de Xcode te permite exportar una selección de código como un fragmento de Carbon en una sola acción. ##### Herramientas - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Abre un archivo en Carbon o descárguelo directamente usando `carbon-now`, con modo interactivo, resaltado selectivo y más. - [CodeExpander](https://codeexpander.com) - Un cliente inteligente GitHub gist con las características de TextExpander. - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Exporte múltiples fragmentos de código de Carbon desde `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - Un chatbot de Telegram que puede tomar fragmentos de código o URLs de GitHub gist y generar una imagen de Carbon. - [R `carbonate`](https://yonicd.github.io/carbonate/) - Permite manipular de forma iterativa la estética de la imagen en `R`, abrirla en Carbon o descargarla directamente. - [Carbon for Slack](https://github.com/faisalsayed10/carbon-slack) - Usa Carbon directamente en Slack. Simplemente ejecute el comando `/carbon`. ##### Citas - ["CS 101 - Una introducción al pensamiento computacional"](https://itunes.apple.com/us/book/id1435714196) - Un libro de texto de ciencias de la computación por Sarbo Roy. ## Autores Carbon es un proyecto de: - Mike Fix ([@mfix22](https://github.com/mfix22)). - Brian Dennis ([@briandennis](https://github.com/briandennis)). - Jake Dexheimer ([@jakedex](https://github.com/jakedex)). #### Licencia [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribuir y apoyar ¡Los Pull Requests son bienvenidos! Por favor consulte nuestra [guía de contribución](/.github/CONTRIBUTING.md) para obtener más detalles. ### Patrocinadores ¿Tu empresa utiliza Carbon? Considera patrocinar el proyecto para financiar nuevas características, correcciones de errores y más. [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Backers ¿Te gusta utilizar Carbon? Considera apoyar el proyecto para financiar nuevas características y mejoras. ### Gracias a [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) por patrocinar el alojamiento de Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Contribuyentes ![](https://opencollective.com/carbon-app/contributors.svg?width=1024) #### Todos los Contribuyentes Gracias a todas estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.fa.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ##  آشنایی اولیه احتمالا تا الان [کلی از این](https://twitter.com/dan_abramov/status/890191815567175680) [اسکرین شات](https://twitter.com/reactjs/status/890511993261654017) [های کد ها](https://twitter.com/notquiteleo/status/873483329345028096) را در توئیتر و اینطرف و آنطرف دیده اید. ولی بنظر ما هنوز جای بهبود در زیبایی این تصاویر بود، پس این شما و این کربن! کربن یک ابزار حرفه ای برای ساختن و اشتراک تصاویر چشم نواز از کد شماست. پس منتظر چه هستید؟ همین حالا کد تان را به زیبا ترین شکل ممکن آماده کنید!

    Carbon example

    ## امکانات - **شخصی سازی**. امکان شخصی سازی تقریبا همه چیز، از استایل رنگ بندی گرفته تا فونت و خیلی بیشتر! - **اشتراک سریع**. با یک کلیک تصویرتان را دانلود و یا اشتراک گذاری کنید. - **ذخیره کد های کوچک**. با ساخت یک حساب کاربری، قطعه کد های شما ذخیره و در صورت نیاز میتوانید بطور مستقیم آنها را در توئیتر و اسلک به اشتراک بگذارید. ## نحوه استفاده #### وارد کردن کد به کربن راه های مختلفی برای واردن کردن کد شما به کربن وجود دارد: - فایل کدتان را داخل ادیتور بیندازید(Drag and Drop) - یک gist ID از گیتهاب را در آدرس صفحه بیندازید (برای مثال: [`
    --- ## پشتیبانی و مشارکت در این پروژه ما از Pull requests ها استقبال میکنیم! لطفا [قوانین و شرایط مشارکت و کانتریبیوت کردن](/.github/CONTRIBUTING.md) را برای جزئیات بیشتر بخوانید. ### اسپانسر ها و حامیان [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) [![Powered by Vercel](https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg)](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) ### با تشکر از [▲ Vercel](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) برای اسپانسر هاستینگ کربن شدن. ### تمام مشارکت کنندگان یک دمت گرم، به همه این افراد فوق العاده که در پروژه کربن مشارکت داشته اند ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.fr.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introduction Vous connaissez [toutes ces](https://twitter.com/dan_abramov/status/890191815567175680) [captures d'écran](https://twitter.com/reactjs/status/890511993261654017) [de code](https://twitter.com/notquiteleo/status/873483329345028096) que vous avez croisées sur Twitter ? Bien que le code seul soit généralement impressionnant, nous avons estimé qu'il était possible d'améliorer la partie esthétique. Carbon facilite la création et le partage de votre code source au travers de superbes images. Alors qu'est-ce que vous attendez ? Impressionnez tous vos abonnés avec vos nouvelles prouesses en matière de conception graphique.

    Carbon example

    ## Fonctionnalités - **Import depuis GitHub gist**. Ajoutez simplement un ID de gist GitHub à l'URL - **Personnalisation**. Personnalisez des éléments tels que le thème de la syntaxe de votre image, le style de la fenêtre, etc. - **Partage rapide**. Enregistrez votre image ou tweetez un lien en un clic ## Usage #### Import Il existe différentes manières d'importer du code dans Carbon : - Déposer un fichier dans l'éditeur - Ajouter un identifiant de GitHub gist à l'URL (ex. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Collez votre code directement #### Personnalisation Une fois que tout votre code est saisi dans Carbon, vous pouvez personnaliser votre image en modifiant le thème de la syntaxe, la couleur d'arrière-plan, le thème de la fenêtre ou le remplissage. #### Export / Partage Une fois que vous avez personnalisé votre image, vous pouvez soit twetter le lien vers l’image, soit l'enregistrer directement. Si vous utilisez le bouton 'Tweet', Carbon rendra automatiquement votre image accessible aux utilisateurs malvoyants. Toutefois, si vous souhaitez tweeter manuellement votre image carbone, veuillez vérifier [comment rendre les images accessibles aux utilisateurs malvoyants de Twitter](https://help.twitter.com/fr/using-twitter/picture-descriptions). Si vous incluez une image Carbon dans un article, le code source sera invisible pour les technologies d'assistance, il ne sera pas possible de l'agrandir ou de le copier, etc. Veuillez penser à ajouter un autre élément avec le code source sous forme de texte, comme une [balise HTML Details](https://developer.mozilla.org/fr/docs/Web/HTML/Element/details) sous l'image. ## Communauté Découvrez les projets créés par notre fantastique communauté : ##### Plugins pour les éditeurs de code - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Ouvrez la sélection de votre fichier IntelliJ IDEA actuel dans Carbon via un menu contextuel - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Ouvrez votre fichier Atom actuel dans Carbon avec `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Ouvrez votre fichier VS Code actuel dans Carbon avec la commande `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Ouvrez la sélection de votre fichier Sublime Text 3 actuel avec une clé liée personnalisée - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Ouvrez la sélection dans votre Vim / Neovim actuelle en utilisant la fonction `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Ouvrez la sélection dans votre Emacs actuel en utilisant la fonction interactive `carbon-now-sh` ##### Outils - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Ouvrez un fichier dans Carbon ou téléchargez-le directement en utilisant `carbon-now`, comportant un mode interactif, une mise en évidence sélective et plus encore. ##### Bibliothèques - [R `carbonate`](https://yonicd.github.io/carbonate/) - Manipulez de manière itérative l’esthétique de l’image dans `R` et ouvrez-la dans Carbon, ou téléchargez-la directement. ##### Manuels - ["CS 101 - Une introduction à la pensée informatique"](https://itunes.apple.com/us/book/id1435714196) - un manuel d'informatique de Sarbo Roy. ## Auteurs Carbon est un projet de - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licence [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribuer Les PRs sont les bienvenues ! Veuillez lire notre [CONTRIBUTING.md](/.github/CONTRIBUTING.md) pour plus de détails. ### Merci à [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) pour sponsoriser l'hébergement de Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Tous les contributeurs Merci à toutes ces personnes merveilleuses ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.he.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    פתיחה

    מכירים את כל צילומי המסך של קוד שרואים בטוויטר? למרות שבדרך כלל הקוד מרשים, אנחנו ראינו מקום לשיפור במחלקת האסתטיקה. Carbon הופך יצירת ושיתוף תמונות מדהימות של קוד המקור שלכם לפשוט. אז למה אתם מחכים? החלו להרשים את כל העוקבים שלכם בעזרת כישרון העיצוב החדש שלכם.

    Carbon example

    תכונות

    • התאמה אישית. שנו דברים בתמונה כמו ערכת הנושא של התחביר, עיצוב הגופן ועוד
    • שיתוף במהירות. שמרו את התמונה שלכם או קישור אליה בלחיצה אחת
    • שמרו קטעי קוד. צרו חשבון על מנת לשמור קטעי קוד למאוחר יותר. קטעי קוד ששותפו נפתחים אוטומטית בטוויטר וסלאק.

    שימוש

    ייבוא

    יש כמה דרכים לייבא קוד לCarbon:

    • שחררו קובץ מעל העורך
    • הוסיפו GitHub gist ID לכתובת (לדוגמה carbon.now.sh/<gist_id_goes_here>)
    • או פשוט תתחילו לכתוב!

    התאמה אישית

    לאחר שהקוד שלכם נמצא בCarbon, אתם יכולים להתאים אישית את התמונה על ידי שינוי ערכת הנושא של התחביר, צבע הרקע, ערכת הנושא של החלון, ריפוד, צללים, גופן ועוד.

    ייצוא ושיתוף

    אחרי שהתאמתם אישית את התמונה שלכם, אתם יכולים לשתף את קטע הקוד שלכם בכמה דרכים

    יצירת קטע קוד שמור

    שיתוף קטע קוד שמור יפתח אוטומטית את התמונה בפלטפורמות כמו טוויטר וסלאק. זה נותן למשתמשים לראות את היצירה שלכם, ובנוסף גישה לקוד המקור דרך הקישור. יתרה מכך, אם אתם צריכים לעדכן את הקוד, הכנסו לקישור על מנת לערוך את קטע הקוד ישירות.

    כדי ליצור קטע קוד שמור:

    1. התחברו בעזרת הכפתור "התחבר/הרשם"
    2. ערכו כמו שתערכו בדרך כלל - קטע הקוד ישמר אוטומטית
    3. העתיקו את הקישור משורת הכתובות של הדפדפן והתחילו לשתף!
    הטמעת קטע קוד

    זו הדרך המומלצת לשיתוף Carbon באתר או בבלוג שלכם. קוראים אף יכולים להעתיק את הקוד בעזרת לחיצת כפתור.

    אתם יכולים להטמיע כל קטע קוד של Carbon ישירות באתר שלכם בעזרת הכתובת carbon.now.sh/embed. "תפריט ההעתקה" נותן לכם להעתיק את קטע קוד הiFrame הנכון, או לקודד את הכתובת להטמעה בפלטפורמות כמו מדיום.

    לסיום, אתם יכולים גם להטמיע קטעי קוד שמורים או GitHub gists בעזרת carbon.now.sh/embed/:id

    שימוש בכפתור הציוץ

    כפתור הציוץ ישתף את התמונה בטוויטר, אך גם יקודד את הטקסט של הalt בצורה נכונה על מנת להבטיח שהתמונות שלכם נגישות. עם זאת, אם אתם רוצים לצייץ את התמונה בעצמכם, בבקשה תבדקו איך להפוך את תמונות הטוויטר שלכם לנגישות.

    הורדת התמונה ישירות

    Carbon תומך בהורדת התמונות שלכם כPNG וכSVG. אתם גם יכולים ללחוץ על Export → Open כדי לפתוח את התמונה שלכם ישירות בדפדפן. לסיום, אתם יכולים להעתיק את תמונת הCarbon ישירות ללוח ההעתקה שלכם בעזרת לחיצה על Copy → Image.

    התקנת Carbon לשולחן העבודה (לא מקוון)

    אם אתם משתמשים בגוגל כרום, או דפדפן אחר שתומך בProgressive Web Apps, אתם יכולים להתקין את Carbon לשימוש במצב לא מקוון כך:

    1. היכנסו לcarbon.now.sh
    2. לחצו על תפריט ההגדרות של הדפדפן שלכם
    3. לחצו על "Install Carbon..."

    קהילה

    התסכלו על הפרוייקטים האלו שהקהילה המדהימה שלנו יצרה:

    פלאגינים לעורכי קוד
    • IntelliJ IDEA carbon-now-sh - פתחו את החלק המסומן בקובץ ItelliJ IDEA שלך בCarbon בעזרת תפריט לחיצה ימנית
    • Atom carbon-now-sh - פתחו את קובץ הAtom הנוכחי באמצעות shift-cmd-A
    • VS Code carbon-now-sh - פתחו את קובץ הVS Code הנוכחי בCarbon באמצעות הפקודה carbon
    • Sublime Text 3 carbon-now-sh - פתחו את החלק המסומן בקובץ הSublime Text 3 הנוכחי בעזרת מקשי קיצור מותאמים אישית
    • Vim carbon-now-sh - פתחו את החלק המסומן בVim/Neovim בעזרת הפקודה CarbonNowSh()
    • Emcas carbon-now-sh - פתחו את החלק המסומן בEmcas בעזרת הפונקציה האינטרקטיבית carbon-now-sh
    • Xcode carbon-now-sh - פתחו את החלק המסומן בcarbon.now.sh
    • Xcode nef - תוספת הXcode הזו מאפשרת לכם לייצא חלק נבחר מהקוד כקטע קוד של Carbon בפעולה אחת
    כלים
    • CLI carbon-now-cli - פתחו קובץ בCarbon או הורידו ישירות בעזרת carbon-now, כולל מצב אינטראקטיבי, סימון על פי בחירה ועוד
    • CodeExpander - תוכנת GitHub gist חכמה עם תכונות מTextExpander
    • nef - ייצוא מספר קטעי קוד של Carbon מXcode Playground
    • @carbonshbot - צ'אטבוט של טלגרם שיוצר תמונת Carbon מקטע קוד או כתובת gist
    • R carbonate - ערכו אסתטיקת תמונה באופן אינטראקטיבי בR ופתחו בCarbon או הורידו ישירות.
    ציטוטים

    מחברים

    Carbon הוא פרוייקט שנוצר על ידי:

    רשיון

    FOSSA Status










    ---

    לתרום ולתמוך

    אנחנו מקבלים pull request בברכה! הכנסו להנחינות התרומה לפרטים נוספים.

    נותני חסות ותומכים


    תודה ל

    ▲ Vercel על נתינת חסות לאירוח Carbon

    Deploy with Vercel

    כל התומכים

    תודה מגיעה לכל האנשים הנפלאים האלו (מפתח אימוג'ים):


    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.hi.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## प्रस्तावना आप ट्विटर पर देखे गए [उन सभी](https://twitter.com/reactjs/status/890511993261654017) [कोड](https://twitter.com/dan_abramov/status/890191815567175680) [स्क्रीनशॉट](https://twitter.com/notquiteleo/status/873483329345028096) को जानते हैं? हालांकि कोड आमतौर पर प्रभावशाली है, हमने सौंदर्य विभाग में सुधार के लिए जगह देखी। कार्बन आपके स्रोत कोड की सुंदर छवियों को बनाना और साझा करना आसान बनाता है। तो आप किसका इंतज़ार कर रहे हैं? अपने सभी अनुयायियों को अपने नए डिजाइन कौशल के साथ प्रभावित करें।

    Carbon example

    ## विशेषताएं - **GitHub gist से आयात करें**. बस यूआरएल में एक GitHub gist आईडी संलग्न करें - **अनुकूलन**. थीम, विंडो शैली आदि जैसी चीजों को कस्टमाइज़ करें - **जल्दी से साझा करें**. अपनी छवि को सहेजें या एक क्लिक के साथ एक लिंक ट्वीट करें ## प्रयोग #### Import कार्बन में कोड import करने के कुछ अलग तरीके हैं: - एक फ़ाइल को editor पर छोड़ दें - यूआरएल में एक गिटहब गिस्ट आईडी संलग्न करें (e.g. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - अपना कोड सीधे paste #### अनुकूलन एक बार जब आप अपना पूरा कोड कार्बन में प्राप्त कर लेंगे, तो आप सिंटैक्स थीम, पृष्ठभूमि रंग, विंडो थीम या पैडिंग को बदलकर अपनी छवि को कस्टमाइज़ कर सकते हैं। #### Export/Sharing अपनी छवि को अनुकूलित करने के बाद आप या तो छवि के लिंक को ट्वीट कर सकते हैं, या इसे सीधे सहेज सकते हैं। ## समुदाय इन परियोजनाओं को देखें हमारे शानदार समुदाय ने बनाया है: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - एक context menu के माध्यम से कार्बन में अपनी वर्तमान IntelliJ IDEA फ़ाइल में चयन खोलें - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - `shift-cmd-A` के साथ कार्बन में अपनी वर्तमान एटम फ़ाइल खोलें - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - कार्बन में कमांड `carbon` के साथ अपनी वर्तमान VS Code फ़ाइल खोलें - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - एक कस्टम बाध्य कुंजी के साथ अपने वर्तमान sublime text 3 फ़ाइल में चयन खोलें - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - फ़ंक्शन `CarbonNowSh()` का उपयोग करके अपने वर्तमान Vim/Neovim में चयन को खोलें - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - इंटरैक्टिव फ़ंक्शन `carbon-now-sh` का उपयोग करके अपने वर्तमान Emacs में चयन को खोलें ##### CLIs - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - कार्बन में एक फ़ाइल खोलें या इसे `carbon-now` का उपयोग करके सीधे डाउनलोड करें, जिसमें एक इंटरैक्टिव मोड, चुनिंदा हाइलाइटिंग और बहुत कुछ शामिल है ##### Libraries - [R `carbonate`](https://yonicd.github.io/carbonate/) - `R` में छवि सौंदर्यशास्त्र का आंशिक रूप से उपयोग करें और या तो कार्बन में खुलें या सीधे डाउनलोड करें। ##### पाठ्यपुस्तकें - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - सरबो रॉय द्वारा एक कंप्यूटर विज्ञान पाठ्यपुस्तक। ## लेखक कार्बन द्वारा एक परियोजना है - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### License [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribute PRs का स्वागत है! अधिक जानकारी के लिए कृपया हमारे [CONTRIBUTING.md](/.github/CONTRIBUTING.md) देखें। ### धन्यवाद [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) कार्बन की होस्टिंग को प्रायोजित करने के लिए। [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### All contributors इन सभी अद्भुत लोगों के लिए धन्यवाद ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.in.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ##### Translations
    Español हिंदी Deutsch 简体中文 Português മലയാളം Türkçe 한국어 தமிழ்
    Français 日本語 Svenska Polski Nederlands 臺灣 Indonesia Add +
    ## Perkenalan Tahukah Anda [dari](https://twitter.com/dan_abramov/status/890191815567175680) [semua hasil](https://twitter.com/reactjs/status/890511993261654017) [tangkapan layar kode sumber](https://twitter.com/notquiteleo/status/873483329345028096) yang Anda lihat di twitter? Meskipun kodenya biasanya mengesankan, kami melihat peluang untuk peningkatan dalam nilai estetika. Carbon memudahkan Anda untuk membuat dan berbagi kode sumber Anda menjadi sebuah gambar yang indah. Jadi tunggu apalagi? Buat semua pengikut Anda terkesan dengan keterampilan desain baru Anda.

    Carbon example

    ## Fitur - **Personalisasi**. Anda dapat menyesuaikan berbagai hal untuk gambar yang Anda buat, contohnya seperti tema sintaksis, font, dan lainnya - **Bagikan dengan cepat**. Anda dapat menyimpan atau membagikan gambar yang Anda buat dengan satu kali klik - **Simpan Potongan**. Anda dapat membuat akun untuk menyimpan potongan kode yang dapat digunakan nanti. Potongan akan dibagikan secara otomatis di Twitter dan Slack. ## Penggunaan #### Impor Ada beberapa cara berbeda untuk mengimpor kode ke Carbon: - Menyeret file ke dalam editor - Menambahkan GitHub gist ID ke URL (misalnya. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Atau Anda dapat memulai dengan mengetik kode secara langsung! #### Kostumisasi Setelah Anda telah menaruh semua kode di Carbon, Anda dapat menyesuaikan gambar Anda dengan mengubah tema sintaks, warna latar belakang, tema jendela, padding, bayangan, font, dan masih banyak lagi. #### Mengekspor Dan Berbagi Setelah Anda menyesuaikan gambar Anda, Anda dapat membagikannya dengan berbagai cara. ##### Buat potongan kode untuk disimpan Saat membagikan potongan kode yang disimpan, gambar akan secara otomatis membagikan di platform seperti Twitter dan Slack. Dengan cara ini pengguna lain dapat melihat kreasi Anda, sekaligus memberi mereka akses ke kode sumber melalui tautan tersebut. Lebih baik lagi jika Anda ingin membuat penyesuaian, Anda dapat langsung mengikuti tautan untuk mengedit potongan kode Anda. Cara membuat potongan kode yang dapat disimpan: 1. Masuk menggunakan tombol "Sign in/Sign up" 2. Edit seperti biasa - potongan kode Anda akan disimpan secara otomatis 3. Salin URL dari jendela browser Anda dan bagikan! ##### Sematkan potongan kode Ini adalah cara yang disarankan untuk menggunakan Carbon di situs web atau blog Anda sendiri. Pengunjung bahkan dapat menyalin kode dengan menekan sebuah tombol. Anda dapat memasukkan secara langsung potongan kode apapun ke situs web Carbon Anda dengan URL `carbon.now.sh/embed`. Dari menu "Copy Menu" Anda dapat dengan mudah menyalin seluruh kode iFrame, atau hanya alamat untuk disisipkan pada platform seperti Medium. Terakhir, Anda juga dapat memasukkan potongan kode atau GitHub gists menggunakan `carbon.now.sh/embed/:id`. ##### Menggunakan tombol Tweet Tombol Tweet tidak hanya memastikan bahwa gambar Anda dibagikan di Twitter, tetapi juga menambahkan gambar yang benar dengan menambahkan kode `alt` untuk memastikan gambar Anda dapat diakses. Jika Anda lebih suka men-tweet gambar itu sendiri, lihat terlebih dulu [how to make your Twitter images accessible](https://help.twitter.com/en/using-twitter/picture-descriptions). ##### Unduh gambar secara langsung Carbon mendukung format gambar PNG dan SVG. Anda juga bisa mengklik `Export → Open` untuk membuka gambar Anda langsung di browser. Terakhir, Anda dapat menyalin gambar dari Carbon langsung ke papan klip Anda dengan masuk ke `Copy → Image`. #### Memasang Carbon untuk Desktop (Offline) Jika Anda menggunakan browser Google Chrome, atau browser lain yang mendukung Aplikasi Web Progresif, Anda dapat memasang Carbon untuk digunakan secara offline dengan: 1. Kunjungi [carbon.now.sh](https://carbon.now.sh) 2. Klik menu pengaturan browser Anda 3. Klik "Install Carbon..." ## Komunitas Lihat proyek berikut yang dibuat oleh komunitas kami yang hebat: ##### Plugin Editor - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Buka kode yang dipilih dalam file IntelliJ IDEA Anda saat ini di Carbon dari menu konteks - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Buka file Atom Anda saat ini di Carbon dengan `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Buka file VS Code Anda saat ini di Carbon dengan perintah `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Buka kode yang dipilih di file Sublime Text 3 Anda saat ini dengan kunci yang ditetapkan sendiri - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Buka kode yang dipilih di Vim / Neovim Anda saat ini dengan fungsi `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Buka pilihan di Emacs Anda saat ini menggunakan fungsi interaktif `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Buka pilihan Anda saat ini di `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Ekstensi Xcode ini memungkinkan Anda mengekspor kode yang dipilih sebagai potongan Carbon dengan satu tindakan ##### Alat lainnya - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Buka file di Carbon atau unduh langsung menggunakan `carbon-now`, menampilkan mode interaktif, penyorotan selektif, dan lainnya - [CodeExpander](https://codeexpander.com) - adalah fitur pintar dari GitHub gist client dengan TextExpander - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Ekspor beberapa potongan kode Carbon dari `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - Chatbot Telegram yang dapat mengambil potongan kode atau URL inti dan menghasilkan gambar Carbon - [R `carbonate`](https://yonicd.github.io/carbonate/) - Memanipulasi tampilan gambar secara berulang dalam `R` dan membuka di Carbon atau untuk mendownload secara langsung. ##### Kutipan - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - a computer science textbook by Sarbo Roy. ## Penulis Carbon adalah proyek dari: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Lisensi [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Kontribusi Dan Dukungan Untuk tata cara melakukan PR (Pull Request, cara berkontibusi ke dalam repositori) kita mengacu pada [panduan kontribusi](/.github/CONTRIBUTING.md) untuk lebih jelasnya. ### Sponsor Dan Pendukung [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Terima Kasih banyak untuk [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) telah mensponsori hosting Carbon's. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Semua Kontributor Terima kasih untuk semua orang yang sangat luar biasa ini ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.it.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introduzione Avete presente [tutti](https://twitter.com/dan_abramov/status/890191815567175680) [quegli](https://twitter.com/reactjs/status/890511993261654017) [screenshots di codice](https://twitter.com/notquiteleo/status/873483329345028096) che vedete su Twitter? Anche se il codice è di solito impressionante, abbiamo visto un margine di miglioramento nel reparto estetico. Carbon rende facile creare e condividere belle immagini del vostro codice sorgente. Quindi cosa state aspettando? Andate a stupire tutti i vostri follower con la vostra ritrovata abilità nel design.

    Carbon example

    ## Caratteristiche - **Personalizzazione**. Personalizza cose come il tema della sintassi della tua immagine, lo stile del carattere e altro ancora - **Condividi rapidamente**. Salva la tua immagine o un link con un clic - **Salva i frammenti**. Crea un account per salvare i frammenti per dopo. Quelli condivisi vengono automaticamente pubblicati su Twitter e Slack. ## Uso #### Importazione Ci sono alcuni differenti modi per importare codice in Carbon: - Rilasciare un file nell'editor - Aggiungere un ID GitHub gist all'URL (es. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - O semplicemente iniziare a scrivere! #### Personalizzazione Una volta che avrete tutto il vostro codice in Carbon, potete personalizzare la vostra immagine cambiando il tema della sintassi, il colore dello sfondo, il tema della finestra, il padding, le ombre, i font e altro. #### Esportazione e condivisione Dopo aver personalizzato l'immagine, puoi condividere il frammento in diversi modi ##### Creare un frammento salvato Condividendo un frammento salvato, l'immagine si aprirà automaticamente su piattaforme come Twitter e Slack. Questo permette agli utenti di vedere la tua creazione, dando loro anche accesso al codice sorgente tramite il link. Meglio ancora, se hai bisogno di fare un aggiornamento, basta seguire il link per modificare direttamente lo snippet. Per creare uno snippet salvato: 1. Accedi usando il pulsante "Login/Sign up". 2. Modifica come faresti normalmente - il tuo frammento verrà salvato automaticamente 3. Copia l'URL dalla finestra del tuo browser e condividi! ##### Incorporare un frammento Questo è il metodo raccomandato per condividere Carbon sul proprio sito web o blog. I lettori possono anche copiare il codice con il click di un pulsante. Puoi incorporare qualsiasi frammento di Carbon nel tuo sito web direttamente usando `carbon.now.sh/embed` URL. Il "Menù copia" permette di copiare rapidamente il frammento iFrame corretto, o l'URL codificato per incorporarlo su piattaforme come Medium. Infine, puoi anche incorporare frammenti salvati o gist di GitHub usando `carbon.now.sh/embed/:id`. ##### Usa il pulsante Tweet Il pulsante Tweet non solo condividerà l'immagine su Twitter, ma codificherà anche correttamente l' `alt` per garantire che le tue immagini siano accessibili. Tuttavia, se vuoi twittare tu stesso le immagini, controlla [come rendere accessibili le tue immagini su Twitter.](https://help.twitter.com/en/using-twitter/picture-descriptions). ##### Scarica direttamente l'immagine Carbon supporta il download della vostra immagine come PNG e SVG. Potete anche cliccare `Export → Open` per aprire la tua immagine direttamente nel browser. Infine, potete copiare l'immagine di Carbon direttamente negli appunti andando su `Copy → Image`. #### Installazione di Carbon for Desktop (offline) Se state usando Google Chrome, o un altro browser che supporta Progressive Web Apps, potete installare Carbon per l'uso offline: 1. Visita [carbon.now.sh](https://carbon.now.sh) 2. Clicca sul menu delle impostazioni del tuo browser 3. Clicca "Installa Carbon..." ## Comunità Guarda questi progetti che la nostra fantastica comunità ha creato: ##### Plugin per l'editor - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Aprire la selezione nel file IntelliJ IDEA corrente in Carbon attraverso un menù contestuale - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Aprite il vostro file Atom attuale in Carbon con `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Aprite il vostro attuale file VS Code in Carbon con il comando `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Aprire la selezione nel tuo file Sublime Text 3 corrente con una chiave vincolata personalizzata - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Aprite la selezione nel vostro Vim/Neovim corrente usando la funzione `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Aprite la selezione nel vostro Emacs attuale usando la funzione interattiva `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Aprire la selezione corrente in `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Questa estensione Xcode consente di esportare una selezione di codice come frammento di Carbon in un solo passaggio ##### Strumenti - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Aprire un file in Carbon o scaricarlo direttamente usando `carbon-now`, con una modalità interattiva, evidenziazione selettiva e altro ancora - [CodeExpander](https://codeexpander.com) - Un client GitHub gist intelligente con le caratteristiche di TextExpander - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Esportare più frammenti di codice Carbon da `Xcode Playground` - [`@carbonshbot`](https://t.me/carbonshbot) - Un bot Telegram che prende un frammento di codice o un URL gist e genera un'immagine Carbon - [R `carbonate`](https://yonicd.github.io/carbonate/) - Manipolare iterativamente l'estetica delle immagini in `R` e aprire in Carbon o scaricare direttamente. ##### Citazioni - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - un libro di testo di informatica di Sarbo Roy. ## Autori Carbon è un progetto di: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licenza [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribuire e Sostenere Le richieste di pull sono benvenute! Vedi le nostre [linee guida per i contributi](/.github/CONTRIBUTING.md) per maggiori dettagli. ### Sponsor e finanziatori [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Grazie a [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) per aver sponsorizzato l'hosting di Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Tutti i collaboratori Grazie a tutte queste persone meravigliose ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.ja.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introduction Twitter で[いつも見るような](https://twitter.com/dan_abramov/status/890191815567175680)[こうしたコード](https://twitter.com/reactjs/status/890511993261654017)の[スクリーンショット](https://twitter.com/notquiteleo/status/873483329345028096)をご存知ですか？こうしたコードはたいていは印象的ですが、美しさの点では改善の余地があります。Carbon を使えば、ソースコードの美しいスクリーンショットを簡単に作成し、共有することができます。今すぐ、この新しいデザインの力を使ってフォロワーを感動させましょう。

    Carbon example

    ## Features - **カスタマイズ**. シンタックステーマやウィンドウスタイルなどをカスタマイズ - **すばやくシェア**. ワンクリックで画像を保存したり、リンクをツイート - **GitHub gist からのインポート**. URL に GitHub gist id を付け加える ## Usage #### Import Carbon にインポートするには何通りかの方法があります: - エディターにファイルをドロップする - URL に GitHub gist id を付け加える (e.g. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - コードを直接ペーストする #### Customization コードを Carbon にインポートできたらシンタックステーマや背景色、ウィンドウスタイル、パディングなどで、画像をカスタマイズすることができます。 #### Export/Sharing 画像のカスタマイズが終わったら、画像リンクをツイートしたり直接ダウンロードできます。 'Tweet'ボタンを使えば、Carbon は自動的に画像を利用できるようにします。もし Carbon の画像を手動でツイートしたい場合は、[画像のアクセシビリティを向上させる方法](https://help.twitter.com/en/using-twitter/picture-descriptions)を確認してください。 投稿の中で Carbon 画像を使うと、ソースコードは assistive technology からは見えなくなり、拡大やコピーなどはできなくなります。画像の下に[HTML Details Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)のように、テキストとしてソースコードを持つ別の要素を追加することを検討してください。 #### Installing Carbon for Desktop Google Chrome などの PWA をサポートしているブラウザを使用しているなら、ブラウザの設定メニューから"Install Carbon..."をクリックすることで、Carbon をオフラインで使用するためにインストールできます。 ## Community 私たちの素晴らしいコミュニティが作成したプロジェクトをチェックしてください: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - 現在の IntelliJ IDEA ファイルの選択したコードをコンテキストメニューから Carbon で開く - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - `shift-cmd-A`コマンドを使い、現在の Atom ファイルを Carbon で開く - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - `carbon`コマンドを使い、VS Code ファイルを Carbon で開く - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - カスタムコマンドを使い、現在の Sublime Text 3 ファイルの選択したコードを Carbon で開く - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - `CarbonNowSh()`関数を使い、現在の Vim/Neovim を Carbon で開く - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - `carbon-now-sh`インタラクティブ関数を使い、現在の Emacs を Carbon で開く - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - `carbon.now.sh`を使い、選択したコードを Carbon で開く ##### Tools - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - `carbon-now`を使い、Carbon でファイルを開いたり、直接ダウンロードする。インタラクティブモードや、シンタックスハイライト機能など - [CodeExpander](https://codeexpander.com) - TextExpander 機能を備えたスマートな GitHub Gist クライアント - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - `Xcode Playground`から複数の Carbon のコードスニペットをエクスポート ##### Libraries - [R `carbonate`](https://yonicd.github.io/carbonate/) - `R`でインタラクティブに画像のスタイルを操作し、コードを Carbon で開くか直接ダウンロードする ##### Textbooks - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy によるコンピューターサイエンスのテキストブック ## Authors Carbon は次の人々によるプロジェクトです: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### License [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribute PR を歓迎しています。詳細は[CONTRIBUTING.md](/.github/CONTRIBUTING.md)をご覧ください。 ### Thanks To [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss)は Carbon のホスティングを支援してくれています。 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### All contributors これらのすべての素晴らしい人々に感謝を ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.kr.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introduction 트위터에서 공유되고 있는 [수많은](https://twitter.com/dan_abramov/status/890191815567175680) [코드](https://twitter.com/reactjs/status/890511993261654017) [스크린샷](https://twitter.com/notquiteleo/status/873483329345028096)들을 알고 계신가요? 코드들은 대체로 훌륭하지만, 미적인 부분에서 조금 개선할 점이 보입니다. Carbon은 당신의 소스코드를 손쉽게 아름다운 이미지로 만들고, 공유할 수 있게 도와줍니다. 무엇을 망설이시나요? 당신의 디자인 감각으로 팔로워들을 감동시켜보세요

    Carbon example

    ## Features - **GitHub gist에서 가져오기**. 간단하게 github gist id를 url 에 입력하면 됩니다. - **커스터마이징**. syntax theme, window style 등 많은 것들을 커스터마이징할 수 있습니다. - **빠르게 공유하기**. 클릭 한 번으로 이미지를 저장하거나 Tweet에 공유할 수 있습니다. ## Usage #### Import Carbon에 코드를 적용시키는데는 몇 가지 방법이 있습니다: - 파일 불러오기 - url에 GitHub gist id 붙여넣기 (예시: [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - 코드 복사해서 직접 붙여넣기 #### Customization Carbon에 코드를 넣었다면, syntax theme, 배경 색, window theme, padding 등 이미지에 들어갈 옵션들을 커스터마이징할 수 있습니다. #### Export/Sharing 코드 이미지를 커스터마이징 하고 나면, 곧바로 이미지를 저장하고, Tweet에 공유 할 수 있습니다. ## Community 우리의 멋진 커뮤니티가 만든 아래의 프로젝트들을 확인해보세요: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - context menu를 통해서 IntelliJ IDEA file의 선택 영역을 Carbon에서 엽니다. - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - `shift-cmd-A`를 사용해 현재 보고있는 Atom 파일을 Carbon에서 엽니다. - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - `carbon`명령어를 사용해 현재 보고있는 VS Code 파일을 Carbon에서 엽니다. - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - 커스텀 키를 사용해 Sublime Text 3 파일의 선택 영역을 Carbon에서 엽니다. - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - `CarbonNowSh()` 함수를 사용해 현재 보고 있는 Vim/Neovim 선택 영역을 엽니다. - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - interactive 함수인 `carbon-now-sh`를 사용해 현재 보고있는 Emacs 선택 영역을 엽니다. ##### CLIs - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - `carbon-now` 명령을 사용해서 곧바로 파일을 열거나 다운로드 받으세요. 이 것은 대화형 모드가 지원되고 선택인 하이라이팅 등 많은 것들을 지원합니다. ##### Libraries - [R `carbonate`](https://yonicd.github.io/carbonate/) - `R`을 통해서 이미지의 미적인 부분을 조작하고, 그 이미지를 다운 받거나 Carbon에서 열 수 있습니다. ##### Textbooks - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy가 출판한 컴퓨터 사이언스 교과서. ## Authors Carbon is a project by - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### License [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Contribute 풀리퀘스트는 환영합니다! 더 자세한 내용은 [CONTRIBUTING.md](/.github/CONTRIBUTING.md)를 참조해주세요. ### Thanks To [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss)가 Carbon 호스팅을 지원해주고 있습니다. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### All contributors 아래의 모든 멋진 분들께 감사 드립니다 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.ml.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## ആമുഖം ട്വിറ്ററിൽ നിങ്ങൾ [കാണുന്ന കോഡുകളുടെ](https://twitter.com/dan_abramov/status/890191815567175680) [സ്ക്രീൻഷോട്ടുകളെല്ലാം](https://twitter.com/reactjs/status/890511993261654017) [നിങ്ങൾക്ക് അറിയാമോ](https://twitter.com/notquiteleo/status/873483329345028096)? കോഡ് സാധാരണയായി ആകർഷകമാണെങ്കിലും, സൗന്ദര്യശാസ്ത്ര ഡിപ്പാർട്ടുമെൻറിലെ മെച്ചപ്പെടുത്തലിന് ഇടം കാണാം. നിങ്ങളുടെ സോഴ്സ് കോഡിന്റെ സുന്ദരമായ ചിത്രങ്ങൾ സൃഷ്ടിക്കുന്നതും പങ്കുവെക്കുന്നതും കാർബൺ എളുപ്പമാക്കുന്നു. അപ്പോൾ എന്തിനാണ് നിങ്ങൾ കാത്തിരിക്കുന്നത്? നിങ്ങളുടെ പുതുതായി രൂപകൽപ്പന ചെയ്ത ഡിസൈനുകൾ ഉപയോഗിച്ച് നിങ്ങളെ പിന്തുടരുന്ന എല്ലാവരെയും ആകർഷിക്കുക.

    Carbon example

    ## സവിശേഷതകൾ - **GitHub gist ൽ നിന്ന് ഇമ്പോർട്ടുചെയ്യുക**. ലളിതമായി ഒരു GitHub gist id url ലിൽ ആയി ചേർക്കുക - **ഇഷ്ടാനുസൃതമാക്കൽ**. നിങ്ങളുടെ ഇമേജ് സിന്റാക്സ് തീം, വിൻഡോ ശൈലി തുടങ്ങിയവയും മറ്റും ഇഷ്ടാനുസൃതമാക്കുക - **വേഗത്തിൽ പങ്കിടുക**. നിങ്ങളുടെ ചിത്രം save ചെയ്യുക അല്ലെങ്കിൽ ഒരു ക്ലിക്കിലൂടെ ഒരു ലിങ്ക് ട്വീറ്റ് ചെയ്യുക ## ഉപയോഗം #### ഇറക്കുമതി ചെയ്യുക കാർബണിലേക്ക് കോഡ് ഇംപോർട്ട് ചെയ്യുന്നതിന് കുറച്ച് വ്യത്യസ്ത മാർഗ്ഗങ്ങളുണ്ട്: - എഡിറ്ററിലേക്ക് ഒരു ഫയൽ വലിച്ചിടുക - ഒരു GitHub gist idി url ലേക്ക് കൂട്ടിച്ചേർക്കുക (ഉദാ. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - നിങ്ങളുടെ കോഡ് നേരിട്ട് കൂട്ടിച്ചേര്ക്കുക #### ഇഷ്ടാനുസൃതമാക്കൽ കാർബോണിൽ നിങ്ങളുടെ എല്ലാ കോഡും നിങ്ങൾക്ക് ലഭിച്ചുകഴിഞ്ഞാൽ, നിങ്ങൾക്ക് syntax തീം, പശ്ചാത്തല നിറം, വിൻഡോ തീം അല്ലെങ്കിൽ പാഡിംഗ് എന്നിവ മാറ്റിക്കൊണ്ട് നിങ്ങളുടെ ചിത്രം ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. #### കയറ്റുമതി / പങ്കിടൽ നിങ്ങളുടെ ചിത്രം നിങ്ങൾ ഇഷ്ടാനുസൃതമാക്കിയ ശേഷം നിങ്ങൾക്ക് ഒരു ചിത്രത്തിലേക്ക് ഒരു ലിങ്ക് ട്വീറ്റ് ചെയ്യാം, അല്ലെങ്കിൽ നേരിട്ട് save ചെയ്യാൻ കഴിയും. ## സമൂഹം ഞങ്ങളുടെ ആകർഷണീയമായ കമ്മ്യൂണിറ്റി സൃഷ്ടിച്ച ഈ പ്രോജക്ടുകൾ പരിശോധിക്കുക: ##### എഡിറ്റർ പ്ലഗിനുകൾ - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - ഒരു കോൺടെക്സ്റ്റ് മെനുവിലൂടെ കാർബണിൽ നിങ്ങളുടെ നിലവിലെ IntelliJ IDEA ഫയലിൽ തിരഞ്ഞെടുത്ത ഭാഗം തുറക്കുക - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - നിങ്ങളുടെ നിലവിലെ ആറ്റം ഫയൽ കാർബണിൽ `shift-cmd-A` ഉപയോഗിച്ച് തുറക്കുക - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - നിങ്ങളുടെ നിലവിലുള്ള VS Code ഫയൽ കാർബണിൽ 'carbon' എന്ന കമാൻഡ് ഉപയോഗിച്ച് തുറക്കുക - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - ഇച്ഛാനുസൃത bound കീ ഉപയോഗിച്ച് നിങ്ങളുടെ നിലവിലെ Sublime Text 3 ഫയലിലെ തിരഞ്ഞെടുത്ത ഭാഗം തുറക്കുക - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - നിങ്ങളുടെ നിലവിലുള്ള Vim/Neovim ലെ തിരഞ്ഞെടുത്ത ഭാഗം 'CarbonNowSh()` ഫങ്ഷൻ ഉപയോഗിച്ച് തുറക്കുക - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - നിങ്ങളുടെ നിലവിലുള്ള Emacs ലെ തിരഞ്ഞെടുത്ത ഭാഗം 'carbon-now-sh` എന്ന ഇന്ററാക്ടീവ് ഫങ്ഷൻ ഉപയോഗിച്ച് തുറക്കുക ##### CLI- കൾ - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - കാർബണിൽ ഒരു ഫയൽ തുറക്കുക അല്ലെങ്കിൽ 'carbon-now' ഉപയോഗിച്ച് നേരിട്ട് ഡൌൺലോഡ് ചെയ്യുക, ഒരു ഇന്ററാക്ടീവ് മോഡ് അവതരിപ്പിക്കുന്നു, തിരഞ്ഞെടുത്ത ഹൈലൈറ്റിംഗ് തുടങ്ങിയവ ##### ലൈബ്രറികൾ - [R `carbonate`](https://yonicd.github.io/carbonate/) - 'R' ൽ ഇമേജ് സൗന്ദര്യാത്മകത കൈകാര്യം ചെയ്യുക കൂടാതെ ഒന്നുകിൽ കാർബണിൽ തുറക്കുക അല്ലെങ്കിൽ നേരിട്ട് ഡൗൺലോഡുചെയ്യുക.. ##### പാഠപുസ്തകങ്ങൾ - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - സർബോ റോയുടെ ഒരു കമ്പ്യൂട്ടർ സയൻസ് പാഠപുസ്തകം. ## രചയിതാക്കൾ കാർബൺ ഒരു പ്രോജക്റ്റ് ആണ് - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### അനുമതിപത്രം [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## സംഭാവന ചെയ്യുക PR കൾ സ്വാഗതം ചെയ്യുന്നു! കൂടുതൽ വിവരങ്ങൾക്ക് ദയവായി ഞങ്ങളുടെ [CONTRIBUTING.md](/.github/CONTRIBUTING.md) കാണുക. ### നന്ദി [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) കാർബൺ ഹോസ്റ്റുചെയ്യുന്നതിനുള്ള സ്പോൺസർ. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### സംഭാവന നൽകിയവർ നന്ദി ഈ വിസ്മയകരമായ എല്ലാ ആളുകൾക്കും ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.nl.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introductie Ken je [al die](https://twitter.com/dan_abramov/status/890191815567175680) [code](https://twitter.com/reactjs/status/890511993261654017) [screenshots](https://twitter.com/notquiteleo/status/873483329345028096) die je ziet op Twitter? Hoewel de code meestal indrukwekkend is, zagen we ruimte voor verbetering op esthetisch gebied. Carbon maakt het makkelijk om mooie afbeeldingen van je broncode te maken en te delen. Dus, waar wacht je nog op? Maak indruk op al je volgers met je nieuwe ontwerpvaardigheden.

    Carbon example

    ## Kenmerken - **Personalisatie**. Pas dingen voor je afbeelding aan, zoals syntax-thema, lettertype en meer - **Snel delen**. Sla je afbeelding of een link op met één klik - **Bewaar snippets**. Maak een account om fragmenten/snippets te bewaren voor later. Gedeelde snippets worden automatisch uitgevouwen op Twitter en Slack. ## Gebruik #### Importeren Er zijn een aantal verschillende manieren om code te importeren in Carbon: - Sleep een bestand naar de editor - Voeg een GitHub-gist-ID toe aan het webadres (bijv. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Of begin gewoon te typen! #### Personalisatie Wanneer je al je code in Carbon hebt staan, kun je de afbeelding aanpassen door het veranderen van het syntax-thema, de achtergrondkleur, het vensterthema, de padding, de schaduwen, het lettertype en meer. #### Exporteren & delen Nadat je de afbeelding hebt aangepast, kun je deze op een aantal verschillende manieren delen ##### Maak een bewaarde snippet Bij het delen van een bewaarde snippet zal de afbeelding automatisch uitvouwen op platformen als Twitter en Slack. Op deze manier kunnen gebruikers je creatie zien, terwijl ze ook toegang hebben tot de broncode via de link. Beter nog, als je een aanpassing wil maken, kun je zelf de link volgen om je snippet meteen te bewerken. Om een bewaarde snippet te maken: 1. Log in met de "Sign in/Sign up"-knop 2. Bewerk zoals je dat normaal doet — je snippet wordt automatisch opgeslagen 3. Kopieer het adres van je browservenster en delen maar! ##### Een snippet invoegen Dit is de aangeraden manier om Carbon te gebruiken op je eigen website of blog. Bezoekers kunnen zelfs de code kopiëren met de druk op een knop. Je kunt elke Carbon-snippet rechtstreeks invoegen op je webiste met het `carbon.now.sh/embed`-adres. Vanuit het kopieermenu kun je gemakkelijk de volledige iFrame-code kopiëren, of juist alleen het adres voor invoegen op platformen als Medium. Ten slotte kun je ook bewaarde snippets of GitHub-gists invoegen met `carbon.now/embed/:id`. ##### Gebruik de Tweet-knop De Tweet-knop zorgt er niet alleen voor dat je afbeelding op Twitter wordt gedeeld, het voegt ook de juiste `alt`-tekst toe om ervoor te zorgen dat je afbeeldingen toegankelijk zijn. Tweet je toch liever de afbeelding zelf, bekijk dan eerst [hoe je afbeeldingen op Twitter beter toegankelijk maakt](https://help.twitter.com/nl/using-twitter/picture-descriptions). ##### Rechtstreeks de afbeelding downloaden Carbon ondersteunt het downloaden van je afbeelding als PNG en SVG. Je kunt ook ook op `Export → Open` klikken om de afbeelding direct in je browser te openen. Daarnaast kun je een Carbon-afbeelding meteen naar je klembord kopiëren met de `Image`-optie in het kopieermenu. #### Carbon voor Desktop installeren (offline) Als je Google Chrome gebruikt, of een andere browser met ondersteuning voor Progressive Web Apps, dan kun je Carbon installeren om offline te gebruiken door: 1. Bezoek [carbon.now.sh](https://carbon.now.sh) 2. Open het instellingen-menu van je browser 3. Klik op "Carbon installeren..." ## Community Bekijk eens deze projecten die door onze geweldige community zijn gemaakt: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Open de geselecteerde code in je huidige IntelliJ IDEA-bestand in Carbon vanuit het contextmenu - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Open je huidige Atom-bestand in Carbon met `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Open je huidige VS Code-bestand in Carbon met het commando `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Open de geselecteerde code in je huidige Sublime Text 3-bestand met een zelf toegewezen toets - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Open de geselecteerde code in je huidige Vim/Neovim met de functie `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Open de geselecteerde code in je huidige Emacs met de interactieve functie `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Open de geselecteerde code in `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Met deze Xcode-extensie kun je de geselecteerde code exporteren als een Carbon-snippet met een enkele actie ##### Hulpmiddelen - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Open een bestand in Carbon of download het rechtstreeks met `carbon-now`, met ondersteuning voor een interactieve modus, selectieve highlighting en meer - [CodeExpander](https://codeexpander.com) - Een slimme GitHub-gist-client met de features van TextExpander - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Exporteer meerdere Carbon-code-snippets van `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - Een Telegram-chatbot die op basis van een code-snippet of gist-URL een Carbon-afbeelding maakt - [R `carbonate`](https://yonicd.github.io/carbonate/) - Iteratief manipuleren van het uiterlijk van afbeeldingen in `R` om vervolgens te openen in Carbon of om rechtstreekts te downloaden. ##### Boeken - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - een informatica-boek door Sarbo Roy. ## Auteurs Carbon is een project van: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licentie [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Meewerken & ondersteuning Pull requests zijn welkom! Bekijk onze [richtlijnen voor bijdrages](/.github/CONTRIBUTING.md) voor meer details. ### Sponsors Gebruikt jouw bedrijf Carbon? Overweeg dan eens het project te sponsoren voor het financieren van nieuwe features, bugfixes en meer. [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Donateurs Gebruik je Carbon graag? Denk dan eens aan het ondersteunen van het project voor het financieren van nieuwe features en verbeteringen ### Dank aan [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) voor het sponsoren van Carbon's hosting. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Iedereen die heeft meegewerkt Dank gaat naar al deze geweldige mensen ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.pl.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Wprowadzenie Znasz [wszystkie te](https://twitter.com/dan_abramov/status/890191815567175680) [zrzuty ekranu](https://twitter.com/reactjs/status/890511993261654017) [z kodu](https://twitter.com/zeithq/status/805779711154647040) które widzisz na Twitterze? Chociaż kod zazwyczaj robi wrażenie, widzieliśmy miejsce na ulepszenia w dziale estetyki. Carbon ułatwia tworzenie i udostępnianie pięknych obrazów kodu źródłowego. Więc na co czekasz? Zaimponuj wszystkim swoim obserwatorom swoją nowo odkrytą umiejętnością projektowania.

    Carbon example

    ## Cechy - **Dostosowywanie**. Dostosuj takie elementy, jak motyw składni obrazu, styl czcionki i nie tylko - **Udostępniaj szybko**. Zapisz swój obraz lub link za jednym kliknięciem - **Zapisz snippety**. Utwórz konto, aby zapisać snippety na później. Udostępnione fragmenty są automatycznie rozwijane na Twitterze i Slacku. ## Stosowanie #### Import Istnieje kilka różnych sposobów importowania kodu do Carbon: - Upuść plik do edytora - Dołącz identyfikator gist GitHub do adresu URL (np. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Lub po prostu zacznij pisać! #### Dostosowywanie Po umieszczeniu całego kodu w Carbon możesz dostosować swój obraz, zmieniając motyw składni, kolor tła, motyw okna, dopełnienie, cienie, czcionki i nie tylko. #### Eksportowanie i udostępnianie Po dostosowaniu obrazu możesz udostępnić swój snippet na wiele sposobów ##### Utwórz zapisany snippet Udostępnienie zapisanego snippeta spowoduje automatyczne rozwinięcie obrazu na platformach takich jak Twitter i Slack. Dzięki temu użytkownicy mogą zobaczyć twoje dzieło, jednocześnie dając im dostęp do kodu źródłowego za pośrednictwem linku. Jeszcze lepiej, jeśli chcesz dokonać aktualizacji, po prostu skorzystaj z łącza, aby bezpośrednio edytować fragment. Aby utworzyć zapisany snippet: 1. Zaloguj się za pomocą przycisku "Zaloguj się/Zarejestruj się" 2. Edytuj jak zwykle - twój fragment zostanie zapisany automatycznie 3. Skopiuj adres URL z okna przeglądarki i udostępnij! ##### Osadź snippet Jest to zalecana metoda udostępniania Carbon na własnej stronie internetowej lub blogu. Czytelnicy mogą nawet skopiować kod jednym kliknięciem przycisku. Możesz osadzić dowolny fragment Carbon w swojej witrynie bezpośrednio za pomocą rozszerzenia `carbon.now.sh/embed` URL. "Copy Menu" umożliwia szybkie skopiowanie prawidłowego fragmentu elementu iFrame lub zakodowanego adresu URL w celu umieszczenia na platformach takich jak Medium. Na koniec możesz również osadzić zapisane snippety lub gisty GitHub za pomocą `carbon.now.sh/embed/:id`. ##### Użyj przycisku Tweet Przycisk Tweet nie tylko udostępni obraz na Twitterze, ale także poprawnie zakoduje tekst `alt`, aby zapewnić dostępność obrazów. Jeśli jednak chcesz samodzielnie tweetować obraz, sprawdź [jak udostępnić swoje obrazy na Twitterze](https://help.twitter.com/en/using-twitter/picture-descriptions). ##### Pobierz obraz bezpośrednio Carbon obsługuje pobieranie obrazu w formacie PNG i SVG. Możesz także klikną `Export → Open`, aby otworzyć obraz bezpośrednio w przeglądarce. Na koniec możesz skopiować obraz Carbon bezpośrednio do schowka, przechodząc do `Copy → Image`. #### Instalowanie Carbon for Desktop (Offline) Jeśli korzystasz z Google Chrome lub innej przeglądarki obsługującej progresywne aplikacje internetowe, możesz zainstalować Carbon do użytku w trybie offline przez: 1. Odwiedź [carbon.now.sh](https://carbon.now.sh) 2. Kliknij menu ustawień przeglądarki 3. Kliknij "Install Carbon..." ## Społeczność Sprawdź te projekty, które stworzyła nasza niesamowita społeczność: ##### Wtyczki edytora - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Otwórz wybór w bieżącym pliku IntelliJ IDEA w Carbon za pomocą menu kontekstowego - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Otwórz swój bieżący plik Atom w Carbon za pomocą `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Otwórz bieżący plik VS Code w Carbon za pomocą polecenia `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Otwórz zaznaczenie w bieżącym pliku Sublime Text 3 za pomocą niestandardowego powiązanego klucza - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Otwórz wybór w aktualnym Vimie/Neovimie za pomocą funkcji `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Otwórz zaznaczenie w aktualnym Emacsie za pomocą funkcji interaktywnej `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Otwórz bieżący wybór w `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - To rozszerzenie Xcode umożliwia wyeksportowanie wybranego kodu jako snippetu Carbon w jednej akcji ##### Narzędzia - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Otwórz plik w Carbon lub pobierz go bezpośrednio za pomocą `carbon-now`, zawierającego tryb interaktywny, selektywne podświetlanie i nie tylko - [CodeExpander](https://codeexpander.com) - Inteligentny klient GitHub z funkcjami TextExpander - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Eksportuj wiele fragmentów kodu Carbon z `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - Chatbot Telegrama, który pobiera fragment kodu lub główny adres URL i generuje obraz Carbon - [R `carbonate`](https://yonicd.github.io/carbonate/) - teracyjnie manipuluj estetyką obrazu w `R` i albo otwórz w Carbon, albo pobierz bezpośrednio. ##### Cytaty - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - podręcznik informatyki autorstwa Sarbo Roy. ## Autorzy Carbon jest projektem od: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licencja [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Wnieś wkład i wsparcie Pull requesty są mile widziane! Zobacz nasze [contributing guidelines](/.github/CONTRIBUTING.md) aby uzyskać więcej szczegółów. ### Sponsorzy Czy twoja firma używa Carbon? Rozważ sponsorowanie projektu, aby sfinansować nowe funkcje, poprawki błędów i nie tylko. [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Backers Uwielbiasz używać Carbon? Rozważ wsparcie projektu w celu sfinansowania nowych funkcji i ulepszeń ### Podziękowania dla [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) za sponsorowanie hostingu dla Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Wszyscy współtwórcy Podziękowania dla wszystkich tych wspaniałych ludzi ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.ru.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Введение Вы знаете [все](https://twitter.com/dan_abramov/status/890191815567175680) [эти красивые](https://twitter.com/reactjs/status/890511993261654017) [изображения кода](https://twitter.com/notquiteleo/status/873483329345028096) в Twitter? Хотя код и так обычно впечатляет, мы увидели возможность улучшить его в эстетическом плане. Carbon позволяет легко создавать красивые изображения кода и делиться ими. Чего же вы ждете? Удивите всех подписчиков своим новым дизайнерским мастерством!

    Carbon example

    ## Особенности - **Настройка**. Настройте такие вещи, как тема синтаксиса вашего изображения, шрифт и прочее - **Быстрый обмен**. Сохраните ваше изображение или поделитель ссылкой в один клик - **Сохранение фрагментов**. Создайте аккаунт, чтобы сохранить фрагменты кода. Сохраненными фрагментами можно сразу поделиться в Twitter и Slack. ## Использование #### Импортирование Есть несколько способов импортировать код в Carbon: - Перетащите файл в редактор - Добавьте GitHub gist ID в URL (например [`carbon.now.sh/<место_для_gist>`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Просто начните печатать! (Или вставьте код из буфера обмена) #### Настройка Как только вы поместили код в Carbon, вы можете кастомизировать изображение меняя тему синтаксиса, фоновый цвет, тему окна, отступы, тени, шрифты и многое другое. #### Экспортирование и обмен После настройки изображения, вы можете поделиться фрагментом несколькими способами ##### Создайте сохраненный фрагмент Если вы хотите поделиться сохраненным фрагментом, то изображение автоматически можно запостить в Twitter, Slack и др. Это позволит пользователям не только увидеть ваше творение, но также даст им доступ к исходному коду по ссылке. А еще, если вам нужно обновить код, просто перейдите по этой же ссылке, чтобы отредактировать фрагмент напрямую. Чтобы создать и сохранить фрагмент кода: 1. Зайдите через в аккаунт через кнопки "Sign in/Sign up" 2. Редактируйте как обычно — ваш код сохранится автоматически 3. Скопируйте URL из браузера и поделитесь ссылкой! ##### Создание встроенного фрагмента Это рекомендуемый способ поделиться фрагментом Carbon на вашем сайте или блоге. Читатели также смогут скопировать код нажатием кнопки. Вы можете встроить любой фрагмент кода Carbon на вашем сайте напрямую, используя ссылки `carbon.now.sh/embed`. "Copy Menu" позволит быстро скопировать правильный код iFrame или закодированную ссылку для размещения на таких платформах как Medium. И наконец, вы также можете встраивать сохраненные фрагменты или GitHub gist'ы с помощью `carbon.now.sh/embed/:id`. ##### Использование кнопки Tweet Кнопка Tweet не толко поделится изображением в Twitter, но также корректно закодирует все `alt`-тексты чтобы удостовериться, что ваши изображения доступны. Тем не менее, если вы хотите твиттнуть изображение вручную, то рекомендуем изучить [как сделать ваши изображения Twitter доступными](https://help.twitter.com/ru/using-twitter/picture-descriptions). ##### Скачать изображение напрямую Carbon позволяет сохранять изображения в форматах PNG и SVG. Вы можете также нажать `Export → Open` чтобы открыть ваше изображение из браузера. Наконец, вы можете скопировать готовое изображение фрагмента в буфер обмена используя `Copy → Image`. #### Установка Carbon на ПК (для использования оффлайн) Если вы используете Google Chrome или любой другой браузер, который поддерживает Progressive Web Apps, вы можете установить Carbon на компьютер, чтобы использовать его без Интернета: 1. Зайдите на [carbon.now.sh](https://carbon.now.sh) 2. Нажмите на кнопку настроек у вашего браузера 3. Выберите "Установить Carbon..." (или "Install Carbon...") ## Сообщество Оцените эти проекты от нашего крутого сообщества: ##### Плагины для редакторов - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Откройте выделение в текущем файле в IntelliJ IDEA в Carbon через контекстное меню - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Откройте текущий файл в Atom в Carbon с помощью `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Откройте текущий файл VS Code в Carbon с помощью команды `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Откройте выделение в текущем файле в Sublime Text 3 через кастомный связанный ключ - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Откройте выделение в текущем файле в Vim/Neovim используя функцию `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Откройте выделение в текущем файле в Emacs используя интерактивную функцию `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Откройте выделенный текст с помощью `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Это расширение для Xcode позволяет экспортировать выделенный текст как фрагмент в Carbon в одно действие ##### Инструменты - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Откройте файл в CArbon или скачайте его напрямую используя `carbon-now` с выборочным выделением, интерактивным режимом и многим другим - [CodeExpander](https://codeexpander.com) - Смарт-клиент для работы с GitHub gist'ами с функциями TextExpander - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Экспортируйте несколько фрагментов кода в Carbon из `Xcode Playground` - [`@carbonshbot`](https://t.me/carbonshbot) - Telegram чат-бот, который превращает код или gist URL в изображение Carbon - [R `carbonate`](https://yonicd.github.io/carbonate/) - Интерактивно меняйте стиль изображения на `R` и также открывайте его в Carbon или скачивайте напрямую - [Carbon for Slack](https://github.com/faisalsayed10/carbon-slack) - Используйте Carbon в Slack. Просто вызовите команду `/carbon`. ##### Цитирования - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Книга по компьютерным наукам от Сарбо Роя. ## Авторы Carbon существует благодаря: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Лицензия [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Дополняйте и поддерживайте Пул реквесты приветствуются! Пожалуйста, изучите [правила](/.github/CONTRIBUTING.md) для более подробной информации. ### Спонсоры [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) [![Powered by Vercel](https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg)](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) ### Благодарности [▲ Vercel](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) за поддержку хостинга Carbon. ### Все авторы Выражаем благодарности всем этим замечательным людям ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    ================================================ FILE: docs/README.se.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Introduktion Du vet [alla dom](https://twitter.com/dan_abramov/status/890191815567175680) [där](https://twitter.com/reactjs/status/890511993261654017) [kodskärmdumparna](https://twitter.com/notquiteleo/status/873483329345028096) som du ser på Twitter? Även om koden vanligtvis är imponerande såg vi utrymme för förbättringar inom den estetiska avdelningen. Carbon gör det enkelt att skapa och dela vackra bilder av din källkod. Så vad väntar du på? Gå imponera på alla dina följare med dina nyfunna designfärdigheter.

    Carbon example

    ## Funktioner - **Anpassning**. Anpassa saker som bildens syntaxtema, fönsterstil och mer - **Dela snabbt**. Spara din bild eller en länk med ett klick - **Importera från GitHub gist**. Lägg superlätt till ett GitHub gist id till url:en ## Användande #### Importera Det finns några olika sätt att importera kod till Carbon: - Släpp en fil till editorn - Lägg till ett GitHub gist id till url:en (t.ex. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Klistra in din kod direkt #### Anpassning När du har fått all din kod i Carbon, kan du anpassa din bild genom att ändra syntaxtema, bakgrundsfärg, fönstertema eller padding. #### Exportera/Delning När du har anpassat din bild kan du antingen Tweet:a en länk till bilden eller spara den direkt. Om du använder 'Tweet'-knappen, kommer Carbon automatiskt göra din bild tillgänglig. Om du däremot vill tweet:a din bild manuellt, kolla in [hur du gör dina Twitterbilder åtkomliga](https://help.twitter.com/en/using-twitter/picture-descriptions). Om du inkluderar en Carbon bild i ett inlägg, kommer källkoden att vara osynlig för hjälpmedel, det kommer inte att vara möjligt att förstora den eller kopiera, osv. Tänk på att göra källkoden tillgänglig i text, som ett [HTML Details Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) under bilden. #### Installera Carbon för skrivbordet (Offline) Om du använder Google Chrome, eller en annan webbläsare som stöder Progressive Web Apps, kan du installera Carbon för användning offline genom att: 1. Besöka [https://carbon.now.sh](https://carbon.now.sh) 2. Klicka på webbläsarens inställningsmeny 3. Klicka på "Installera Carbon..." ## Community Kolla in dessa projekt som vår fantastiska community har skapat: ##### Editor Plugins - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Öppna urvalet i din nuvarande IntelliJ IDEA fil i Carbon genom en kontext meny - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Öppna din nuvarande Atom fil i Carbon med `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Öppna din nuvarande VS Code fil i Carbon med kommando `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Öppna urvalet i din nuvarande Sublime Text 3 fil med en anpassad bunden nyckel - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Öppna urvalet i din aktuella Vim/Neovim med funktionen `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Öppna urvalet i dina nuvarande Emacs med hjälp av interaktiv funktionen `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Öppna ditt nuvarande val i `carbon.now.sh` ##### Verktyg - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Öppna en fil i Carbon eller ladda ner den direkt med `carbon-now`, med ett interaktivt läge, selektiv markering och mer - [CodeExpander](https://codeexpander.com) - En smart GitHub gist klient med TextExpander funktionerna. - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Exportera flera Carbon kodavsnitt från `Xcode Playground`. ##### Bibliotek - [R `carbonate`](https://yonicd.github.io/carbonate/) - Iterativt manipulera bildestetik i `R` och antingen öppna i Carbon eller ladda ner direkt. ##### Läroböcker - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - En datavetenskaplig lärobok av Sarbo Roy. ## Författare Carbon är ett projekt av: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Licens [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Bidra & Support Pull requests är välkomna! Snälla Se våra [bidragsriktlinjer](/.github/CONTRIBUTING.md) för mer detaljer. ### Sponsorer Använder ditt företag Carbon? Överväg att sponsra projektet för att finansiera nya funktioner, bugfixar och mer. [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Backers Älskar du att använda Carbon? Överväg att stödja projektet för att hitta nya funktioner och förbättringar ### Tack vare [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) för sponsring Carbon's hosting. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Alla som bidragit Tack till alla dessa underbara människor ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.ta.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## முன்னுரை ட்விட்டர் மற்றும் நீங்கள் [பார்க்க குறியீடுகள்](https://twitter.com/dan_abramov/status/890191815567175680) [அனைத்து திரைக்காட்சிகளும்](https://twitter.com/reactjs/status/890511993261654017) [நீங்கள் தெரிந்து](https://twitter.com/notquiteleo/status/873483329345028096)? கோட் பொதுவாக கவர்ச்சிகரமானது, ஆனால் அழகியல் துறை முன்னேற்றத்திற்கான அறை உள்ளது. கார்பன் உங்கள் மூல குறியீட்டின் அழகிய படங்களை உருவாக்க மற்றும் பகிர்ந்து கொள்ள எளிதாக்குகிறது. நீ ஏன் காத்திருக்கிறாய்? புதிதாக வடிவமைக்கப்பட்ட வடிவமைப்புகளுடன் உங்களைப் பின்தொடர்பவர்கள் அனைவரையும் கவர்ந்திழுக்கலாம். [கார்பன்](https://carbon.now.sh) திட்டத்தைப் பற்றி மேலும் அறியவும் அல்லது மேலும் அறியவும் [வெளியிட்டது](https://.io/case-studies/carbon/) படிக்க.

    Carbon example

    ## அம்சங்கள் - **GitHub gist** இருந்து இறக்குமதி. வெறுமனே ஒரு GitHub குறியீட்டு அடையாள URL - **தன்விருப்ப** சேர்க்க. உங்கள் படத்தை தொடரியல் தீம், சாளர பாணி மற்றும் இன்னும் தனிப்பயனாக்கலாம் - **வேகமாக பகிர்**. உங்கள் கோப்பு, அல்லது ஒரு கிளிக்கில் ட்வீட் ஒரு இணைப்பை சேமிக்க ## பயன்பாடு #### இறக்குமதி கார்பனுக்கு குறியீட்டை இறக்குமதி செய்ய சில வழிகள் உள்ளன: - ஆசிரியர் மீது ஒரு கோப்பை இங்கு இழுக்கவும் - சேர்க்கவும் **GitHub gist** ஐடி இணைய முகவரிக்குு (எடுத்துக்காட்டு: [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - உங்கள் குறியீட்டை நேரடியாக ஒட்டுக #### கைமுறையாக்கத்திற்கான உங்கள் குறியீடு அனைத்தையும் உள்வாங்கிக், நீங்கள் தீம், பின்னணி நிறம், திணிப்பு மற்றும் தீம் மாறும் தொடரியல் முடியும், அல்லது சாளரத்தை உங்கள் படத்தை தனிப்பயனாக்கப்படலாம். #### ஏற்றுமதி / பகிர்வு நீங்கள் உங்கள் படத்தை தனிப்பயனாக்கியுள்ளீர்கள் பிறகு, நீங்கள் ஒரு படத்தை ஒரு இணைப்பை ட்வீட் முடியும், அல்லது நீங்கள் நேரடியாகவும் சேமிக்கலாம். ## சமூகம் எங்கள் அற்புதமான சமூகம் உருவாக்கிய திட்டங்கள் பாருங்கள்: ##### எழுதி செருகுநிரல்கள் - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - உங்கள் நடப்பு IntelliJ IDEA கோப்பில் கார்பனில் ஒரு தேர்ந்தெடுக்கப்பட்ட மெனுவில் தேர்ந்தெடுக்கப்பட்ட பிரிவைத் திறக்கவும் - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - உங்கள் நடப்பு Atom கோப்பை கார்பன் `shift-cmd-A` உடன் திறக்கவும் - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - `carbon` கட்டளையுடன் உங்கள் தற்போதைய VSCode கோப்பை கார்பனில் திறக்கவும் - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - தனிபயன் கட்டப்பட்ட விசைடன் உங்கள் தற்போதைய Sublime text 3 கோப்பில் தேர்வைத் திறக்கவும் - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - உங்கள் தற்போதைய Vim / Neovim செயல்பாடு மூலம் தேர்வு திறக்க `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - ஊடாடும் செயல்பாடு பயன்படுத்தி உங்கள் தற்போதைய Emacs தேர்வு திறக்க `carbon-now-sh` ##### கருவிகள் - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - கார்பனில் ஒரு கோப்பைத் திறக்கவும் அல்லது அதை நேரடியாகப் பயன்படுத்தி பதிவிறக்கவும் `carbon-now`, featuring an inஒரு ஊடாடும் முறை, தேர்ந்தெடுக்கப்பட்ட சிறப்பம்சங்கள் மற்றும் பலவற்றைக் கொண்டுள்ளது ##### கட்டமைப்புகள் - [R `carbonate`](https://yonicd.github.io/carbonate/) - வெளிப்படையாக `R` இல் பட அழகியல் கையாள மற்றும் கார்பன் திறந்த அல்லது நேரடியாக பதிவிறக்க. ##### பாடப்புத்தகங்கள் - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - சர்போ ராய் ஒரு கணினி அறிவியல் பாடநூல். ## உரிமையாளர்கள் கார்பன் மென்பொருள் - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### உரிமம் [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## பங்களிக்க PR வரவேற்கிறோம்! மேலும் தகவலுக்கு எங்கள் [CONTRIUTING.md](/.github/CONTRIBUTING.md) பார்க்கவும். ### நன்றி [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) கார்பன் ஹோஸ்டிங் ஸ்பான்சர்.. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### பங்களிப்பாளர்கள் இந்த அற்புதமான மக்களுக்கு நன்றி ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.tr.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Giriş [Twitter'da](https://twitter.com/dan_abramov/status/890191815567175680) [karşımıza çıkan](https://twitter.com/reactjs/status/890511993261654017) [bu kodları](https://twitter.com/notquiteleo/status/873483329345028096) biliyorsunuz değil mi? Kod genelde ne kadar etkileyici olsa da, estetik olarak geliştirilebileceğini düşündük. Carbon kaynak kodunuzdan etkileyici görüntüler yaratmayı ve bunları paylaşmayı kolaylaştırır. Hala neyi bekliyorsunuz? Yeni tasarımlarınız ile takipçilerinizi etkilemeye başlayın.

    Carbon example

    ## Özellikler - **GitHub gist'ten import edebilme**. Basitce Github Gist id'sini url'e ekleyin - **Kişiselleştirme**. Ekran görüntüsünün syntax renklendirmesini, pencere yapısını ve daha pek çok şeyi değiştirin - **Kolayca Paylaşabilme**. Görüntüyü kaydedin veya tek bir tık ile Twitter'da paylaşın ## Kullanım #### Import Carbon'da kod import etmenin birkaç yolu vardır: - Editöre bir dosya sürükleyin - Github Gist id'sini url'e ekleyin (örneğin: [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Kodunuzu kopyalayıp yapıştırın #### Kişiselleştirme Kodunuzu Carbon editörüne aldıktan sonra, syntax renklendirmesini, arka plan rengini, pencere yapısını ve pek çok şeyi değiştirebilirsiniz #### Export/Paylaşma Kodunuzun görüntüsünü kişiselleştirdikten sonra, görüntüyü kaydedebilir veya tek bir tık ile Twitter'da paylaşabilirsiniz. ## Topluluk Topluluğun yarattığı muhteşem projelere göz atın: ##### Editör Eklentileri (Pluginler) - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - IntelliJ IDEA dosyanızı context menüsü ile Carbon'da açın - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Atom dosyanızı `shift-cmd-A` ile Carbon'da açın - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - VS Code dosyanızı `carbon` komutu ile Carbon'da açın - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Sublime Text 3 dosyanızı kişisel tuş kombinasyonunuz ile Carbon'da açın - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Vim/Neovim'deki seçili dosyayı `CarbonNowSh()` komutu ile Carbon'da açın - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Açık olan Emacs'teki kodu `carbon-now-sh` interaktif fonksiyonunu kullanarak Carbon'da açın ##### CLI'lar - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Bir dosyayı Carbon'da açın, veya `carbon-now` komutu ile bilgisayarınıza indirin. İnteraktif mod ve highlighting desteği ile ##### Kütüphaneler - [R `carbonate`](https://yonicd.github.io/carbonate/) - Görüntü özelliklerini iteratif olarak `R`'de değiştirin, Carbon'da açın, veya bilgisayarınıza indirin ##### Kitaplar - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy'un bilgisayar bilimleri kitabı. ## Yaratıcılar Carbon bir projesidir - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Lisans [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Katkıda Bulunun PRlara açığız! Lütfen [CONTRIBUTING.md](/.github/CONTRIBUTING.md) linkine bakın. ### Teşekkürler [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) Carbon'un hostingine sponsor oldukları için [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Katkıda Bulunanlar Bu muhteşem insanlara teşekkürler ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.tw.zh.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## 簡介 你見過 Twitter 上面的 [這些](https://twitter.com/dan_abramov/status/890191815567175680) [程式碼](https://twitter.com/reactjs/status/890511993261654017) [圖片](https://twitter.com/notquiteleo/status/873483329345028096) 嗎? 雖然這些程式碼令人印象深刻，但從美觀程度來說還有提升空間。Carbon 能夠輕鬆地將你的原始碼產生漂亮的圖片並分享。還等什麼呢？用這個新發現的美化工具秀給你的 followers 看吧。

    Carbon example

    ## 特色 - **客製化**：訂製選項包括圖片的語法主題、字體樣式等 - **快速分享**：一鍵產生圖片或網址並分享 - **儲存記錄**：建立帳號來儲存程式碼片段，已分享的程式碼會自動展開至 Twitter 和 Slack ## 使用 #### 匯入 有幾種不同的方法可以將程式碼匯入到 Carbon： - 把檔案拖曳到編輯器中 - 在 carbon url 後面加上 GitHub gist id （例如 [`carbon.now.sh/你的_gist_id`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)） - 或是直接貼上程式碼！ #### 客製化 當你把程式碼輸入到 Carbon 後，你可以調整程式碼圖片。客製選項包括語法主題、背景顏色、視窗主題、邊距、陰影、字體等等。 #### 匯出 & 分享 當你調整完圖片樣式後，可以透過以下方式分享。 ##### 儲存程式碼片段 這種方式可以透過連結直接將程式碼片段分享到 Twitter 跟 Slack 這類平台。這種方式可以讓使用者在看圖片的同時，也能夠點開網址取得你的程式碼。而且如果你需要更新程式碼的話，直接在同一個網址更新程式碼就可以了！ 如何儲存程式碼片段？ 1. 先登入 Carbon 2. 照你平常的方式編輯程式碼就可以了，系統會自動儲存程式碼片段 3. 複製瀏覽器上的網址並且分享出去 ##### 嵌入程式碼片段 如果你想要分享程式碼片段在你自己的網站或部落格，這是一個最推薦的方式。讀者可以使用複製按鈕直接複製你的程式碼片段。 你只要透過 `carbon.now.sh/embed/:id` 這個網址，就可以直接讓你的程式碼片段嵌入到網站裡了。 ##### 使用 Tweet 按鈕分享 "Tweet" 按鈕不只會將你的程式碼片段變成圖片分享至 Twitter，也會設定正確的 `alt` 屬性以確保你的圖片是符合無障礙環境，Carbon 將自動將你的圖片讀取權限設定為公開。不過如果你想手動分享圖片，也可以看看 [如何將你的圖片設定成無障礙環境](https://help.twitter.com/en/using-twitter/picture-descriptions)。 ##### 直接下載圖片 Carbon 也支援直接將程式碼片段下載為 PNG 或是 SVG 檔。你可以點選 `Export → Open` 直接在瀏覽器打開你的程式碼片段圖片。你也可以使用 `Copy → Image` 直接將圖片複製到你的剪貼簿裡面。 #### 安裝 Carbon 桌面客戶端（離線） 如果你使用的是 Google Chrome 或別的支持 PWA 技術的瀏覽器，你可以安裝 Carbon 並離線使用： 1. 訪問 [https://carbon.now.sh](https://carbon.now.sh) 2. 點擊瀏覽器的設置按鈕 3. 點擊 "安裝 Carbon..." ## 社群 瀏覽社群中的這些優秀專案： ##### 編輯器擴充功能 - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - 在 IntelliJ IDEA 中透過右鍵選單輸入選中的程式碼到 Carbon - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - 在 Atom 中透過 `shift-cmd-A` 快捷鍵輸入當前檔案到 Carbon - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - 在 VS Code 中透過 `carbon` 命令輸入當前檔案到 Carbon - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - 在 Sublime Text 3 中透過自訂快捷鍵輸入選中的程式碼到 Carbon - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - 在 Vim/Neovim 中透過 `CarbonNowSh()` 函數輸入選中的程式碼到 Carbon - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - 在 Emacs 中透過 `carbon-now-sh` 交互函數輸入選中的程式碼到 Carbon - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - 在 `carbon.now.sh` 中打開選中的程式碼 - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - 這個 Xcode 外掛程式能讓你將選中的程式碼一鍵輸出成 Carbon 片段 ##### 工具 - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - 用 `carbon-now` 命令在 Carbon 中打開一個檔案或者直接下載它，包含互動式選項、可選高亮等功能 - [CodeExpander](https://codeexpander.com) - 是一個智慧並具有像 TextExpander 特性的 GitHub Gist 客戶端 - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - 從 `Xcode Playground` 輸出多個 Carbon 程式碼片段。 ##### 工具 - [R `carbonate`](https://yonicd.github.io/carbonate/) - 用 `R` 腳本疊代處理圖片樣式並在 Carbon 中打開或直接下載。 ##### 引用 - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy 寫的一本電腦科學書. ## 專案作者 Carbon 專案由 TA 們發起： - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### License [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## 貢獻程式碼 歡迎 PR！請查看 [貢獻指南](/.github/CONTRIBUTING.md) 了解詳情。 ### 贊助商 你的公司在用 Carbon 嗎？考慮一下為此專案的新功能開發、bug 修復等提供贊助。 [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### 贊助者 喜歡用 Carbon 嗎？考慮一下為此專案的新功能開發或改進提供贊助。 ### 感謝 [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) 贊助了 Carbon 的服務託管。 ### 所有貢獻者 感謝所有這些優秀的貢獻者們 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.ua.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Введення Ви знаєте [всі](https://twitter.com/dan_abramov/status/890191815567175680) [ці](https://twitter.com/reactjs/status/890511993261654017) [зображення коду](https://twitter.com/notquiteleo/status/873483329345028096) в Twitter? Хоча код зазивчай вражає, ми побачили місце для вдосконалення у естетичному плані. Carbon полегшує створення та обмін чудовими зображеннями коду. То що ти чекаєш? Вперед здивовувати всіх своїх підписників новими дизайнерськими шматочками коду.

    Carbon example

    ## Особливості - **Налаштування**. Налаштуйте такі речі, як тему синтаксису вашого зображення, стиль шрифту тощо - **Поділіться швидко**. Збережіть своє зображення або посилання на нього одним клацанням миші - **Збереження фрагментів**. Створіть обліковий запис, щоб зберегти фрагмети на потім. Спільні фрагменти автоматично розгортають в Twitter та Slack. ## Використання #### Імпорт Існує кілька різних способів імпорту коду в Carbon: - Перекиньте файл у редактор - Додайте GitHub gist ID до URL-адреси (e.g. [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Або просто починайте друкувати! #### Налаштування Помістивши ваш код до Carbon, ви можете налаштувати своє зображення, змінивши тему синтаксису, колір тла, тему вікна, відступів, тіней, шрифтів тощо. #### Експорт та спільний доступ Після того, як ви налаштували своє зображення, ви можете поділитися своїм фрагментом кількома способами ##### Створіть збережений фрагмент Спільний доступ до збереженого фрагмента автоматично опублікує зображення на таких платформах, як Twitter і Slack. Це дозволяє користувачам бачити ваше творіння, а також надає їм доступ до вихідного коду за посиланням. А ще краще, якщо вам потрібно зробити оновлення, просто перейдіть за посиланням та відредагуйте фрагмент. Для того щоб створити збережений фрагмент: 1. Увійдіть використовуючи кнопки "Sign in" або "Sign up" 2. Редагуйте, як зазвичай — ваш фрагмент збережеться автоматично 3. Скопіюйте URL-адресу з вікна веб-переглядача та діліться з ким завгодно! ##### Вбудований фрагмент Це рекомендований спосіб обміну Carbon на вашому власному веб-сайті або в блозі. Читачі, навіть, можуть скопіювати код одним натисканням кнопки. Ви можете вбудувати будь-який фрагмент коду Carbon на власному веб-сайті за допомогою URL-адреси `carbon.now.sh/embed`. "Меню копіювання" дозволяє швидко скопіювати правильний iFrame фрагмент, або URL для вбудування на платформах, як Medium. Нарешті, ви можете вбудувати збережені фрагменти або GitHub gist, використовуючи `carbon.now.sh/embed/:id`. ##### Використовуйте кнопку Tweet Кнопка Tweet не лише дозволить поділитися зображенням у Twitter, але й правильно закодує `alt` текст щоб упевнитися, що ваші зображення будуть доступні. Однак, якщо ви хочете твітнути зображення самостійно, перевірте [як зробити ваші зображення у Twitter доступними](https://help.twitter.com/en/using-twitter/picture-descriptions). ##### Завантажте зображення напряму Carbon підтримує завантаження вашого зображення у форматах PNG та SVG. Ви також можете натиснути `Експорт → Відкрити`, щоб відкрити зображення безпосередньо у браузері. Нарешті, ви можете скопіювати Carbon зображення безпосередньо у буфер обміну, перейшовши до пункту `Копіювати → Зображення`. #### Встановлення Carbon на комп'ютер (Offline) Якщо ви використовуєте Google Chrome або інший браузер, який підтримує Progressive Web Apps, ви можете встановити Carbon для використання в автономному режимі, виконавши такі дії: 1. Перейдіть [carbon.now.sh](https://carbon.now.sh) 2. Натисніть на меню налаштувань браузера 3. Натисніть "Встановити Carbon..." ## Спільнота Ознайомтеся з цими проєктами, які створила наша дивовижна спільнота: ##### Плагіни для редакторів - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - Відкрийте виділення у поточному файлі IntelliJ IDEA у Carbon за допомогою контекстного меню - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - Відкрийте поточний Atom файл в Carbon за допомогою команди `shift-cmd-A` - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - Відкрийте поточний VS Code файл в Carbon за допомогою команди `carbon` - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Відкрийте виділення у поточному файлі Sublime Text 3 за допомогою спеціально пов’язаного ключа - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - Відкрийте виділення у вашому поточному Vim / Neovim за допомогою функції `CarbonNowSh()` - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - Відкрийте вибір у вашому поточному Emacs за допомогою інтерактивної функції `carbon-now-sh` - [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - Відкрийте ваш поточний вибір у `carbon.now.sh` - [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - Це розширення Xcode дозволяє експортувати виділений код, як фрагмент Carbon за одну дію ##### Інструменти - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Відкрийте файл у Carbon або завантажте його безпосередньо за допомогою `carbon-now`, що включає інтерактивний режим, вибіркове підсвічування тощо. - [CodeExpander](https://codeexpander.com) - Розумний GitHub gist клієнт з функціями TextExpander. - [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - Експорт кількох фрагментів Carbon коду із `Xcode Playground`. - [`@carbonshbot`](https://t.me/carbonshbot) - Telegram чат-бот, який бере фрагмент коду або посилання на gist та генерує Carbon зображення. - [R `carbonate`](https://yonicd.github.io/carbonate/) - Ітеративно маніпулюйте естетикою зображення у символі `R` і відкривайте у Carbon або завантажуйте напряму. ##### Цитати - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - підручник з інформатики від Sarbo Roy. ## Автори Carbon - це проєкт від: - Mike Fix ([@mfix22](https://twitter.com/fixitup2)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Ліцензія [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Сприяння та підтримка PR вітаються! Будь ласка, перегляньте наші [рекомендації](/.github/CONTRIBUTING.md) для більш детальної інформації. ### Спонсори [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### Дякуємо [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) за спонсорство хостингу Carbon. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Усі учасники Подяка всім цим чудовим людям ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    Praveen Kumar Purushothaman
    🌍

    Amir Elsagan
    🌍
    korzck
    🌍
    Sakibul Alam
    🌍
    ================================================ FILE: docs/README.uz.md ================================================

    maintained with Ranger All Contributors MIT License FOSSA Status



    ## Kirish [Twitterda](https://twitter.com/dan_abramov/status/890191815567175680) [biz uchratgan](https://twitter.com/reactjs/status/890511993261654017) [kodlarni](https://twitter.com/notquiteleo/status/873483329345028096) bilasiz, to'g'rimi? Umuman olganda, kod qanchalik ta'sirli bo'lsa, biz uni estetik jihatdan yaxshilash mumkin deb o'yladik. Karbon manba kodingizdan ajoyib tasvirlarni yaratish va almashishni osonlashtiradi. Hali nima kutyapsiz? O'z izdoshlaringizni yangi dizaynlaringiz bilan hayratda qoldirishni boshlang.

    Carbon example

    ## Xususiyatlari - **GitHub gist-dan import qilish imkoniyati**. GitHub gist identifikatorini url-ga qo'shish kifoya - **Shaxsiylashtirish**. Skrinshotning sintaksisi rangini, oyna tuzilishini va boshqalarni o'zgartiring - **Oson almashish**. Rasmni saqlang yoki bir marta bosish bilan Twitter-ga ulashing ## Foydalanish #### Import Carbon-ga kodni import qilishning bir necha yo'li mavjud: - Faylni muharrirga torting - Github gist identifikatorini url-ga qo'shing (masalan: [`carbon.now.sh/`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - Kodingizni nusxalash va joylashtirish #### Shaxsiylashtirish Kodingizni Carbon muharririga import qilgandan so'ng, siz sintaksis rangini, fon rangini, oyna tuzilishini va boshqalarni o'zgartirishingiz mumkin. #### Export/Ulashish Kodingiz tasvirini moslashtirgandan so'ng, siz rasmni saqlashingiz yoki bir marta bosish bilan Twitter-da baham ko'rishingiz mumkin. ## Jamiyat Jamiyat yaratgan ajoyib loyihalar bilan tanishing: ##### Tahrirlovchi plaginlari (pluginlar) - [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - IntelliJ IDEA faylingizni Carbon-da kontekst menyusi bilan oching - [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - `shift-cmd-A` yordamida Atom faylingizni Carbon-da oching - [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - VS Code faylingizni `carbon` buyrug'i bilan oching - [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - Sublime Text 3 faylingizni shaxsiy tugmalar birikmasi yordamida Carbon-da oching - [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - `CarbonNowSh()` buyrug'i bilan Vim/Neovim in Carbon-da tanlangan faylni oching - [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - "Carbon-now-sh" interaktiv funksiyasidan foydalanib, ochiq Emacs kodini Carbon-da oching ##### CLI'lar - [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - Carbon-da faylni oching yoki `carbon-now` buyrug'i bilan uni kompyuteringizga yuklab oling. Interaktiv rejim va ta'kidlashni qo'llab-quvvatlash bilan ##### Kutubxonalar - [R `carbonate`](https://yonicd.github.io/carbonate/) - Tasvir xususiyatlarini `R`-da takroriy o'zgartiring, Carbon-da oching yoki kompyuteringizga yuklab oling ##### Kitoblar - ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Royning informatika bo'yicha kitobi. ## ijodkorlar Carbon - bu loyiha - Mike Fix ([@mfix22](https://github.com/mfix22)) - Brian Dennis ([@briandennis](https://github.com/briandennis)) - Jake Dexheimer ([@jakedex](https://github.com/jakedex)) #### Litsenziya [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

    --- ## Hissa qo‘shish PR xush kelibsiz! Iltimos [CONTRIBUTING.md](/.github/CONTRIBUTING.md) havolaga qarang. ### Rahmat [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) Carbon hosting homiyligi uchun [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fcarbon-app%2Fcarbon&project-name=carbon&repo-name=carbon) ### Ishtirokchilar Bu ajoyib odamlarga rahmat ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

    briandennis
    💻 📖 🚇 👀
    mfix22
    💬 💻 🤔
    jakedex
    💬 💻 🎨 📹
    andrewda
    💬 💻 🐛 👀
    yeskunall
    💻 📖 🔧 🐛
    stoshfabricius
    💻
    jkling38
    📖

    otobrglez
    💻
    darahak
    📖
    dom96
    💻
    elrumordelaluz
    💻
    cjb
    💻
    Krzysztof-Cieslak
    💻
    fernahh
    📖

    g3r4n
    💻
    Mat Gadd
    🐛 💻
    Brad Davies
    🐛 💻
    Rafael Câmara
    💻
    Gleb Bahmutov
    ⚠️ 🔧
    Iván Munguía
    💻
    Dillon Mulroy
    💻

    Nihad Abbasov
    💻
    Bruno C. Couto
    💻
    Mark Molnar
    💻
    Takahiko Inayama
    💻
    François Martin
    💻
    Raphael Amorim
    💻
    Camron Flanders
    💻

    Eric Adamski
    💻
    Winner Crespo
    💻 🎨
    Milos
    💻 🔧 📖 🌍
    Yashu Mittal
    💻
    Rachel M. Carmena
    📖
    Miguel Salazar
    📖 🌍
    Vyom Jain
    📖 🌍

    racaljk
    🌍
    Sean
    💻
    Izabela Borges
    🌍
    Shinil M S
    🌍
    Berke Atac
    🌍
    LEE YONGJUN
    🌍
    Matthew Nielsen
    💻

    Boy
    📦
    Vetrivel Chinnasamy
    🌍
    Farzad YZ
    💻 🤔
    Yannick Loriot
    🌍
    Joel Hanson
    💻
    Muhammad Muzzammil
    💻
    souppower
    🚇

    Masato Urai (@uraway_)
    🌍
    Fernando
    🌍
    Megha Sachdev
    💻 ⚠️
    Anudeep Reddy
    🚇
    Munieru
    🌍
    Adam Lusted
    💻
    Jose Noriega
    🌍

    Merlin Fuchs
    🌍
    Ramy Majouji
    💻
    Viktor Nemes
    💻
    Eric Bailey
    💻
    Nazeefa
    🌍
    Pratik Butani
    📝
    Bakti Aditya
    💻

    Caleb Taylor
    💻
    Rogério Munhoz
    💻
    Technoknol
    💻
    Tymoteusz Makowski
    💻
    Nisar Hassan Naqvi
    🐛
    Ilyas Karim
    🐛
    Nick Fix
    🤔

    Melanie Sumner
    🤔
    aluc
    💻
    B. Mearns
    🤔
    Peng Jie
    💻
    Binyamin Aron Green
    💻
    Michal
    🌍
    Quinn Blenkinsop
    💻

    Dwiferdio Seagal Putra
    💻
    Ashley Woodall Clark
    💻
    Tim Wienk
    🌍
    George McCarron
    📖
    Erwin Rahayu
    🌍 📖
    Luca
    💻
    Andrew Hayes
    💻

    Bereket Semagn
    💻
    Lorenzo Lancia
    🌍
    Guy Adler
    🌍
    Dan Bamikiya
    🤔
    kewang
    🌍
    Rizda Dwi Prasetya
    🖋
    AbreuY
    🌍

    >_Rizky.dev
    🌍 📖
    Abidemi Harry
    💻
    Marco
    🌍
    Sam Robbins
    📖
    alceil
    💻
    hatsu
    💻
    ================================================ FILE: lib/api.js ================================================ import axios from 'axios' import debounce from 'lodash.debounce' import ms from 'ms' import { fileToDataURL } from './util' import firebase from './client' import { DEFAULT_CODE } from './constants' export const client = axios.create({ baseURL: `${process.env.NEXT_PUBLIC_API_URL || ''}/api`, headers: { Accept: 'application/json', }, }) function tweet(content, encodedImage) { const processedData = encodedImage.split(',')[1] return client .post('/twitter', { imageData: processedData, altText: content, }) .then(res => res.data.url) .then(url => encodeURIComponent(`Created with @carbon_app ${url}`)) .then(uri => `https://twitter.com/intent/tweet?text=${uri}`) .then(openTwitterUrl) .catch(checkIfRateLimited) } const RATE_LIMIT_CODE = 420 function checkIfRateLimited(err) { if (err.response.status === RATE_LIMIT_CODE) { alert( "Oh no! Looks like too many people are trying to tweet right now and we've been rate limited. Try again soon or save and upload manually!" ) return } throw err } function openTwitterUrl(twitterUrl) { const width = 575 const height = 400 const left = (window.outerWidth - width) / 2 const top = (window.outerHeight - height) / 2 const opts = `status=1,width=${width},height=${height},top=${top},left=${left}` window.open(twitterUrl, '_blank', opts) } const downloadThumbnailImage = img => { return client .get(img.url.replace('http://', 'https://'), { responseType: 'blob' }) .then(res => res.data) .then(fileToDataURL) .then(dataURL => Object.assign(img, { dataURL })) } const unsplash = { download(id) { return client.get(`/unsplash/download/${id}`).then(res => res.data) }, async random() { const imageUrls = await client.get('/unsplash/random') return Promise.all(imageUrls.data.map(downloadThumbnailImage)) }, } const imgur = (data, title) => { const image = data.split(',')[1] return axios .post( 'https://api.imgur.com/3/image', { image, title }, { headers: { Authorization: `Client-ID ${process.env.NEXT_PUBLIC_IMGUR_CLIENT_ID}`, }, } ) .then(res => res.data.data.link) .then(link => window.open(link, '_blank')) .catch(e => { console.error(e) return null }) } function getSnippet(uid = '', { host, filename } = {}) { return client .get(`/snippets/${uid}`, { baseURL: host ? `https://${host}/api` : undefined, params: { filename }, }) .then(res => res.data) .catch(e => { console.error(e) return null }) } function listSnippets(page) { // IDEA: move into axios interceptor return firebase .auth() .currentUser.getIdToken() .then(authorization => client .get(`/snippets`, { params: { page, }, headers: { authorization, }, }) .then(res => res.data) .catch(e => { console.error(e) throw e }) ) } function updateSnippet(uid, state) { const data = { ...state, code: state.code != null ? state.code : DEFAULT_CODE, } if (uid) { return client .patch(`/snippets/${uid}`, data) .then(res => res.data) .catch(e => { console.error(e) return null }) } return client .post(`/snippets`, data) .then(res => res.data) .catch(e => { console.error(e) return null }) } function deleteSnippet(uid) { return client .delete(`/snippets/${uid}`) .then(res => res.data) .catch(e => { console.error(e) return null }) } const createSnippet = debounce(data => updateSnippet(null, data), ms('5s'), { leading: true, trailing: false, }) const api = { snippet: { get: getSnippet, list: listSnippets, update: debounce(updateSnippet, ms('1s'), { leading: true, trailing: true }), create: createSnippet, delete: id => deleteSnippet(id), }, tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }), unsplash, imgur, downloadThumbnailImage, } export default api ================================================ FILE: lib/client.js ================================================ import firebase from 'firebase/app' import 'firebase/auth' if (firebase.apps.length === 0) { if (process.env.NEXT_PUBLIC_FIREBASE_API_KEY && process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID) { firebase.initializeApp({ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`, databaseURL: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseio.com`, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID, }) } } export function logout() { return firebase.auth().signOut().catch(console.error) } export function login(provider) { return firebase .auth() .setPersistence(firebase.auth.Auth.Persistence.LOCAL) .then(() => firebase.auth().signInWithPopup(provider)) .catch(console.error) } export function loginGitHub() { const provider = new firebase.auth.GithubAuthProvider() provider.setCustomParameters({ allow_signup: 'true', }) return login(provider) } export default firebase.apps.length ? firebase : null ================================================ FILE: lib/constants.js ================================================ import toHash from 'tohash' export const FONTS = [ { id: 'Anonymous Pro', name: 'Anonymous Pro' }, { id: 'Cascadia Code', name: 'Cascadia Code' }, { id: 'Droid Sans Mono', name: 'Droid Sans Mono' }, { id: 'Fantasque Sans Mono', name: 'Fantasque Sans Mono' }, { id: 'Fira Code', name: 'Fira Code' }, { id: 'Hack', name: 'Hack' }, { id: 'IBM Plex Mono', name: 'IBM Plex Mono' }, { id: 'Inconsolata', name: 'Inconsolata' }, { id: 'JetBrains Mono', name: 'JetBrains Mono' }, { id: 'Monoid', name: 'Monoid' }, { id: 'Source Code Pro', name: 'Source Code Pro' }, { id: 'Space Mono', name: 'Space Mono' }, { id: 'Ubuntu Mono', name: 'Ubuntu Mono' }, ] export const HIGHLIGHT_KEYS = [ 'background', 'text', 'variable', 'attribute', 'definition', 'keyword', 'operator', 'property', 'number', 'string', 'comment', 'meta', ] export const THEMES = [ { id: '3024-night', name: '3024 Night', highlights: { background: '#090300', text: '#d6d5d4', variable: '#01a252', variable2: '#01a0e4', attribute: '#00c', definition: '#e8bbd0', keyword: '#db2d20', operator: '#fff', property: '#01a252', number: '#a16a94', string: '#fded02', comment: '#cdab53', meta: '#555', }, }, { id: 'a11y-dark', name: 'A11y Dark', highlights: { background: '#2b2b2b', text: '#f8f8f2', variable: '#00e0e0', attribute: '#abe338', definition: '#ffd700', keyword: '#ffa07a', operator: '#f8f8f2', property: '#abe338', number: '#dcc6e0', string: '#ffd700', comment: '#d4d0ab', meta: '#d4d0ab', tag: '#dcc6e0', }, }, { id: 'blackboard', name: 'Blackboard', highlights: { background: '#0C1021', text: '#F8F8F8', variable: '#FF6400', attribute: '#8DA6CE', definition: '#8DA6CE', keyword: '#FBDE2D', operator: '#fff', property: '#fff', number: '#D8FA3C', string: '#61CE3C', comment: '#AEAEAE', meta: '#D8FA3C', tag: '#8DA6CE', }, }, { id: 'base16-dark', name: 'Base 16 (Dark)', highlights: { background: '#151515', text: '#e0e0e0', variable: '#90a959', variable2: '#6a9fb5', attribute: '#00c', definition: '#d28445', keyword: '#ac4142', operator: '#fff', property: '#90a959', number: '#aa759f', string: '#f4bf75', comment: '#8f5536', meta: '#555', tag: '#ac4142', }, }, { id: 'base16-light', name: 'Base 16 (Light)', light: true, highlights: { background: '#f5f5f5', text: '#202020', variable: '#90a959', variable2: '#6a9fb5', attribute: '#90a959', definition: '#d28445', keyword: '#ac4142', operator: '#000', property: '#90a959', number: '#aa759f', string: '#f4bf75', comment: '#8f5536', meta: '#555', tag: '#ac4142', }, }, { id: 'cobalt', name: 'Cobalt', highlights: { background: '#002240', text: '#fff', variable: '#9effff', variable3: 'white', attribute: '#ff80e1', definition: '#fff', keyword: '#ffee80', operator: '#fff', property: '#fff', number: '#ff80e1', string: '#3ad900', comment: '#08f', meta: '#ff9d00', tag: '#9effff', }, }, { id: 'dracula', name: 'Dracula', highlights: { background: '#282a36', text: '#f8f8f2', variable: '#50fa7b', variable2: 'white', variable3: '#ffb86c', attribute: '#50fa7b', definition: '#50fa7b', keyword: '#ff79c6', operator: '#ff79c6', property: '#66d9ef', number: '#bd93f9', string: '#f1fa8c', comment: '#6272a4', meta: '#f8f8f2', tag: '#ff79c6', }, }, { id: 'duotone-dark', name: 'Duotone', highlights: { background: '#2a2734', text: '#6c6783', variable: '#ffcc99', variable2: '#7a63ee', variable3: '#7a63ee', attribute: '#ffcc99', definition: '#eeebff', keyword: '#ffcc99', operator: '#ffad5c', property: '#9a86fd', number: '#ffcc99', string: '#ffb870', comment: '#6c6783', meta: '#555', tag: '#eeebff', }, }, { id: 'hopscotch', name: 'Hopscotch', highlights: { background: '#322931', text: '#d5d3d5', variable: '#8fc13e', variable2: '#1290bf', attribute: '#8fc13e', definition: '#fd8b19', keyword: '#dd464c', operator: '#fff', property: '#8fc13e', number: '#c85e7c', string: '#fdcc59', comment: '#b33508', meta: '#555', tag: '#dd464c', }, }, { id: 'lucario', name: 'Lucario', highlights: { background: '#2b3e50', text: '#f8f8f2', variable: '#f8f8f2', variable3: '#ffb86c', attribute: '#66D9EF', definition: '#72C05D', keyword: '#ff6541', operator: '#66D9EF', property: '#f8f8f2', number: '#ca94ff', string: '#E6DB74', comment: '#5c98cd', meta: '#f8f8f2', tag: '#ff6541', }, }, { id: 'material', name: 'Material', highlights: { background: '#263238', text: 'rgba(233, 237, 237, 1)', variable: '#82B1FF', variable2: '#80CBC4', variable3: '#DECB6B', attribute: '#FFCB6B', definition: 'rgba(233, 237, 237, 1)', keyword: 'rgba(199, 146, 234, 1)', operator: 'rgba(233, 237, 237, 1)', property: '#80CBAE', number: '#F77669', string: '#C3E88D', comment: '#546E7A', meta: '#80CBC4', tag: 'rgba(255, 83, 112, 1)', }, }, { id: 'monokai', name: 'Monokai', highlights: { background: '#272822', text: '#f8f8f2', variable: '#f8f8f2', variable2: '#9effff', variable3: '#66d9ef', attribute: '#a6e22e', definition: '#fd971f', keyword: '#f92672', operator: '#fff', property: '#a6e22e', number: '#ae81ff', string: '#e6db74', comment: '#75715e', meta: '#555', tag: '#bc6283', }, }, { id: 'night-owl', name: 'Night Owl', highlights: { background: '#011627', text: '#abb2bf', variable: '#82AAFF', attribute: '#F78C6C', definition: '#82AAFF', keyword: '#c792ea', operator: '#c792ea', property: '#fff', number: '#F78C6C', string: '#ecc48d', comment: '#5c6370', meta: '#7fdbca', tag: '#7fdbca', }, }, { id: 'nord', name: 'Nord', highlights: { background: '#2e3440', text: '#d8dee9', variable: '#88C0D0', variable3: '#d8dee9', attribute: '#8FBCBB', definition: '#D8DEE9', keyword: '#81A1C1', operator: '#81A1C1', property: '#D8DEE9', number: '#B48EAD', string: '#A3BE8C', comment: '#4C566A', meta: '#81A1C1', tag: '#81A1C1', }, }, { id: 'oceanic-next', name: 'Oceanic Next', highlights: { background: '#304148', text: '#f8f8f2', variable: '#f8f8f2', attribute: '#C594C5', definition: '#6699CC', keyword: '#C594C5', operator: '#fff', property: '#99C794', number: '#F99157', string: '#99C794', comment: '#65737E', meta: '#555', tag: '#C594C5', }, }, { id: 'one-light', name: 'One Light', light: true, highlights: { background: '#fafafa', text: '#383a42', variable: '#e06c75', variable2: '#e45649', attribute: '#d19a66', definition: '#4078f2', keyword: '#a626a4', operator: '#0184bc', property: '#4078f2', number: '#986801', string: '#50a14f', comment: '#a0a1a7', meta: '#383a42', tag: '#e45649', }, }, { id: 'one-dark', name: 'One Dark', highlights: { background: '#282c34', text: '#abb2bf', variable: '#e06c75', attribute: '#d19a66', definition: '#e5c07b', keyword: '#c678dd', operator: '#56b6c2', property: '#56b6c2', number: '#d19a66', string: '#98c379', comment: '#5c6370', meta: '#abb2bf', tag: '#e06c75', }, }, { id: 'panda-syntax', name: 'Panda', highlights: { background: '#292A2B', text: '#E6E6E6', variable: '#ffb86c', variable2: '#ff9ac1', variable3: '#ff9ac1', attribute: '#ffb86c', definition: '#e6e6e6', keyword: '#FF75B5', operator: '#f3f3f3', property: '#f3f3f3', number: '#FFB86C', string: '#19F9D8', comment: '#676B79', meta: '#b084eb', tag: '#ff2c6d', }, }, { id: 'paraiso-dark', name: 'Paraiso', highlights: { background: '#2f1e2e', text: '#b9b6b0', variable: '#48b685', variable2: '#06b6ef', attribute: '#48b685', definition: '#f99b15', keyword: '#ef6155;', operator: '#fff', property: '#48b685', number: '#815ba4', string: '#fec418', comment: '#e96ba8', meta: '#555', tag: '#ef6155', }, }, { id: 'seti', name: 'Seti', highlights: { background: '#151718', text: '#CFD2D1', variable: '#55b5db', variable2: '#a074c4', variable3: '#9fca56', attribute: '#9fca56', definition: '#55b5db', keyword: '#e6cd69', operator: '#9fca56', property: '#a074c4', number: '#cd3f45', string: '#55b5db', comment: '#41535b', meta: '#55b5db', tag: '#55b5db', }, }, { id: 'shades-of-purple', name: 'Shades of Purple ', highlights: { background: '#2D2B55', text: '#FFFFFF', variable: '#9EFFFF', attribute: '#9EFFFF', definition: '#9EFFFF', keyword: '#FF9D00', operator: '#FF9D00', property: '#FAD000', number: '#FF628C', string: '#A5FF90', comment: '#B362FF', meta: '#FF9D00', tag: '#9EFFFF', }, }, { id: 'solarized dark', name: 'Solarized (Dark)', link: 'solarized', highlights: { background: '#002b36', text: '#839496', variable: '#839496', variable2: '#b58900', variable3: '#6c71c4', attribute: '#2aa198', definition: '#2aa198', keyword: '#cb4b16', operator: '#6c71c4', property: '#2aa198', number: '#d33682', string: '#859900', comment: '#586e75', meta: '#859900', tag: '#93a1a1', }, }, { id: 'solarized light', name: 'Solarized (Light)', link: 'solarized', light: true, highlights: { background: '#fdf6e3', text: '#657b83', variable: '#839496', variable2: '#b58900', variable3: '#6c71c4', attribute: '#2aa198', definition: '#2aa198', keyword: '#cb4b16', operator: '#6c71c4', property: '#2aa198', number: '#d33682', string: '#859900', comment: '#586e75', meta: '#859900', tag: '#93a1a1', }, }, { id: 'synthwave-84', name: "SynthWave '84", highlights: { background: '#2b213a', text: '#b6b1b1', variable: '#f92aad', attribute: '#fff5f6', definition: '#fdfdfd', keyword: '#f4eee4', operator: '#f4eee4', property: '#fdfdfd', number: '#f97e72', string: '#ff8b39', comment: '#6d77b3', meta: '#ff8b39', tag: '#f92aad', }, }, { id: 'twilight', name: 'Twilight', highlights: { background: '#141414', text: '#f7f7f7', variable: '#607392', attribute: '#d6bb6d', definition: '#607392', keyword: '#f9ee98', operator: '#cda869', property: '#fff', number: '#ca7841', string: '#8f9d6a', comment: '#777', meta: '#f7f7f7', tag: '#997643', }, }, { id: 'verminal', name: 'Verminal', highlights: { background: 'rgba(0, 0, 0, 0.85)', text: '#fff', variable: '#ff9ba3', variable2: '#fff', attribute: '#d19a66', definition: '#34B7FF', keyword: '#9AE1FF', operator: '#FA78C3', property: '#0af', number: '#d19a66', string: '#98c379', comment: '#5c6370', meta: '#abb2bf', tag: '#e06c75', }, }, { id: 'vscode', name: 'VSCode', highlights: { background: '#1E1E1E', text: '#D4D4D4', variable: '#9CDCFE', attribute: '#d19a66', definition: '#DCDCAA', keyword: '#C586C0', operator: '#D4D4D4', property: '#DCDCAA', number: '#B5CEA8', string: '#CE9178', comment: '#6A9955', meta: '#D4D4D4', tag: '#569cd6', }, }, { id: 'yeti', name: 'Yeti', light: true, highlights: { background: '#ECEAE8', text: '#d1c9c0', variable: '#55b5db', variable2: '#a074c4', variable3: '#96c0d8', attribute: '#9fb96e', definition: '#55b5db', keyword: '#9fb96e', operator: '#9fb96e', property: '#a074c4', number: '#a074c4', string: '#96c0d8', comment: '#d4c8be', meta: '#96c0d8', tag: '#96c0d8', }, }, { id: 'zenburn', name: 'Zenburn', highlights: { background: '#3f3f3f', text: '#dcdccc', variable: '#dfaf8f', variable3: '#dcdccc', attribute: '#dfaf8f', definition: '#dcdccc', keyword: '#f0dfaf', operator: '#f0efd0', property: '#dfaf8f', number: '#dcdccc', string: '#cc9393', comment: '#7f9f7f', meta: '#f0dfaf', tag: '#93e0e3', }, }, ] export const THEMES_HASH = toHash(THEMES) export const LANGUAGES = [ { name: 'Auto', mode: 'auto', }, { name: 'Apache', mode: 'apache', mime: 'text/apache', custom: true, highlight: true, }, { name: 'Bash', mode: 'shell', mime: 'application/x-sh', highlight: true, }, { name: 'Plain Text', mode: 'text', }, { name: 'C', mode: 'clike', mime: 'text/x-csrc', short: 'c', }, { name: 'C++', mode: 'clike', mime: 'text/x-c++src', short: 'c-like', highlight: true, }, { name: 'C#', mode: 'clike', mime: 'text/x-csharp', short: 'csharp', highlight: true, }, { name: 'Clojure', mode: 'clojure', highlight: true, }, { name: 'COBOL', mode: 'cobol', }, { name: 'CoffeeScript', mode: 'coffeescript', highlight: true, }, { name: 'Crystal', mode: 'crystal', highlight: true, }, { name: 'CSS', mode: 'css', highlight: true, }, { name: 'CQL', mode: 'sql', mime: 'text/x-cassandra', short: 'cassandra', }, { name: 'D', mode: 'd', highlight: true, }, { name: 'Dart', mode: 'dart', highlight: true, }, { name: 'Diff', mode: 'diff', mime: 'text/x-diff', highlight: true, }, { name: 'Django', mode: 'django', highlight: true, }, { name: 'Docker', mode: 'dockerfile', highlight: true, }, { name: 'Elixir', mode: 'elixir', custom: true, highlight: true, }, { name: 'Elm', mode: 'elm', highlight: true, }, { name: 'Erlang', mode: 'erlang', highlight: true, }, { name: 'F#', mime: 'text/x-fsharp', mode: 'mllike', short: 'fsharp', highlight: true, }, { name: 'Fortran', mode: 'fortran', highlight: true, }, { name: 'Gherkin', mode: 'gherkin', highlight: true, }, { name: 'GraphQL', mode: 'graphql', custom: true, }, { name: 'Go', mode: 'go', mime: 'text/x-go', highlight: true, }, { name: 'Groovy', mode: 'groovy', highlight: true, }, { name: 'Handlebars', mode: 'handlebars', highlight: true, }, { name: 'Haskell', mode: 'haskell', highlight: true, }, { name: 'HTML/XML', mode: 'htmlmixed', }, { name: 'Java', mode: 'clike', mime: 'text/x-java', short: 'java', highlight: true, }, { name: 'JavaScript', mode: 'javascript', short: 'javascript', highlight: true, }, { name: 'JSON', mode: 'javascript', mime: 'application/json', short: 'json', highlight: true, }, { name: 'JSX', mode: 'jsx', short: 'jsx', }, { name: 'Julia', mode: 'julia', highlight: true, }, { name: 'Kotlin', mode: 'clike', mime: 'text/x-kotlin', short: 'kotlin', highlight: true, }, { name: 'LaTeX', mode: 'stex', short: 'latex', highlight: true, }, { name: 'Lisp', mode: 'commonlisp', short: 'lisp', highlight: true, }, { name: 'Lua', mode: 'lua', highlight: true, }, { name: 'Markdown', mode: 'markdown', highlight: true, }, { name: 'Mathematica', mode: 'mathematica', highlight: true, }, { name: 'MATLAB/Octave', mode: 'octave', mime: 'text/x-octave', short: 'matlab', highlight: true, }, { name: 'MySQL', mode: 'sql', mime: 'text/x-mysql', short: 'mysql', }, { name: 'N-Triples', mode: 'ntriples', mime: 'application/n-triples', }, { name: 'NGINX', mode: 'nginx', highlight: true, }, { name: 'Nim', mode: 'nim', custom: true, highlight: true, }, { name: 'Objective C', mode: 'clike', mime: 'text/x-objectivec', short: 'objectivec', highlight: true, }, { name: 'OCaml', mode: 'mllike', short: 'ocaml', highlight: true, }, { name: 'Pascal', mode: 'pascal', }, { name: 'Perl', mode: 'perl', highlight: true, }, { name: 'PHP', mode: 'php', mime: 'text/x-php', short: 'php', highlight: true, }, { name: 'PowerShell', mode: 'powershell', highlight: true, }, { name: 'Protocol Buffer', mode: 'protobuf', }, { name: 'Python', mode: 'python', highlight: true, }, { name: 'R', mode: 'r', highlight: true, }, { name: 'RISC-V', mode: 'riscv', custom: true, }, { name: 'Ruby', mode: 'ruby', highlight: true, }, { name: 'Rust', mode: 'rust', highlight: true, }, { name: 'Sass', mode: 'sass', }, { name: 'Scala', mode: 'clike', mime: 'text/x-scala', short: 'scala', highlight: true, }, { name: 'Smalltalk', mode: 'smalltalk', highlight: true, }, { name: 'Solidity', mode: 'solidity', custom: true, }, { name: 'SPARQL', mode: 'sparql', mime: 'application/sparql-query', }, { name: 'SQL', mode: 'sql', highlight: true, }, { name: 'Stylus', mode: 'stylus', mime: 'stylus', highlight: true, }, { name: 'Swift', mode: 'swift', highlight: true, }, { name: 'TCL', mode: 'tcl', highlight: true, }, { name: 'TOML', mode: 'toml', }, { name: 'Turtle', mode: 'turtle', mime: 'text/turtle', }, { name: 'TypeScript', mode: 'javascript', mime: 'application/typescript', short: 'typescript', highlight: true, }, { name: 'TSX', mode: 'jsx', mime: 'text/typescript-jsx', short: 'tsx', }, { name: 'Twig', mode: 'twig', mime: 'text/x-twig', highlight: true, }, { name: 'VB.NET', mode: 'vb', }, { name: 'Verilog', mode: 'verilog', highlight: true, }, { name: 'VHDL', mode: 'vhdl', highlight: true, }, { name: 'Vue', mode: 'vue', }, { name: 'XQuery', mode: 'xquery', highlight: true, }, { name: 'YAML', mode: 'yaml', highlight: true, }, ] export const EXPORT_SIZES = [ { id: '1x', name: '1x', value: 1 }, { id: '2x', name: '2x', value: 2 }, { id: '4x', name: '4x', value: 4 }, ] export const EXPORT_SIZES_HASH = toHash(EXPORT_SIZES) export const LANGUAGE_MIME_HASH = toHash(LANGUAGES, 'mime') export const LANGUAGE_MODE_HASH = toHash(LANGUAGES, 'mode') export const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short') export const DEFAULT_LANGUAGE = 'auto' export const DEFAULT_THEME = THEMES_HASH.seti export const DEFAULT_BG_COLOR = 'rgba(171, 184, 195, 1)' export const DEFAULT_EXPORT_SIZE = EXPORT_SIZES_HASH['2x'] export const COLORS = { BLACK: '#121212', PRIMARY: '#F8E81C', SECONDARY: '#fff', GRAY: '#858585', DARK_GRAY: '#393939', HOVER: '#1F1F1F', PURPLE: '#C198FB', DARK_PURPLE: '#55436F', RED: '#ff5f56', BLUE: '#57b5f9', GREEN: '#37b589', } export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => { const go = (f, seed, acc) => { const res = f(seed) return res ? go(f, res[1], acc.concat([res[0]])) : acc } return go(f, seed, []) }` export const DEFAULT_SETTINGS = { paddingVertical: '56px', paddingHorizontal: '56px', backgroundImage: null, backgroundImageSelection: null, backgroundMode: 'color', backgroundColor: DEFAULT_BG_COLOR, dropShadow: true, dropShadowOffsetY: '20px', dropShadowBlurRadius: '68px', theme: DEFAULT_THEME.id, windowTheme: 'none', language: DEFAULT_LANGUAGE, fontFamily: 'Hack', fontSize: '14px', lineHeight: '133%', windowControls: true, widthAdjustment: true, lineNumbers: false, firstLineNumber: 1, exportSize: '2x', watermark: false, squaredImage: false, hiddenCharacters: false, name: '', width: 680, } export const DEFAULT_WIDTHS = { minWidth: 320, maxWidth: 1280, } export const DEFAULT_PRESETS = [ { ...DEFAULT_SETTINGS, icon: '/static/presets/4.png', id: 'preset:4', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(74,144,226,1)', dropShadow: false, theme: 'material', fontFamily: 'Fira Code', lineHeight: '152%', icon: '/static/presets/7.png', id: 'preset:7', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(248,231,28,1)', dropShadow: false, theme: 'blackboard', fontFamily: 'Fira Code', lineHeight: '152%', icon: '/static/presets/8.png', id: 'preset:8', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(182,162,145,1)', dropShadow: false, theme: 'zenburn', windowTheme: 'bw', lineHeight: '152%', icon: '/static/presets/9.png', id: 'preset:9', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(121,72,185,1)', dropShadow: false, theme: 'verminal', windowTheme: 'bw', fontFamily: 'Fira Code', fontSize: '14px', lineHeight: '143%', icon: '/static/presets/0.png', id: 'preset:0', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(239,40,44,1)', theme: 'one-light', lineHeight: '143%', icon: '/static/presets/1.png', id: 'preset:1', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(31,129,109,1)', dropShadow: false, theme: 'night-owl', lineHeight: '143%', windowControls: false, icon: '/static/presets/2.png', id: 'preset:2', }, { ...DEFAULT_SETTINGS, backgroundColor: 'rgba(222,171,99,1)', theme: 'duotone-dark', icon: '/static/presets/5.png', id: 'preset:5', }, ] ================================================ FILE: lib/custom/autoCloseBrackets.js ================================================ // CodeMirror, copyright (c) by Marijn Haverbeke and others // Distributed under an MIT license: https://codemirror.net/LICENSE import CodeMirror from 'codemirror' let defaults = { pairs: '()[]{}\'\'""', closeBefore: ')]}\'":;>', triples: '', explode: '[]{}', } let Pos = CodeMirror.Pos CodeMirror.defineOption('autoCloseBrackets', false, function (cm, val, old) { if (old && old != CodeMirror.Init) { cm.removeKeyMap(keyMap) cm.state.closeBrackets = null } if (val) { ensureBound(getOption(val, 'pairs')) cm.state.closeBrackets = val cm.addKeyMap(keyMap) } }) function getOption(conf, name) { if (name == 'pairs' && typeof conf == 'string') return conf if (typeof conf == 'object' && conf[name] != null) return conf[name] return defaults[name] } let keyMap = { Backspace: handleBackspace, Enter: handleEnter } function ensureBound(chars) { for (let i = 0; i < chars.length; i++) { let ch = chars.charAt(i), key = "'" + ch + "'" if (!keyMap[key]) keyMap[key] = handler(ch) } } ensureBound(defaults.pairs + '`') function handler(ch) { return function (cm) { return handleChar(cm, ch) } } function getConfig(cm) { let deflt = cm.state.closeBrackets if (!deflt || deflt.override) return deflt let mode = cm.getModeAt(cm.getCursor()) return mode.closeBrackets || deflt } function handleBackspace(cm) { let conf = getConfig(cm) if (!conf || cm.getOption('disableInput')) return CodeMirror.Pass let pairs = getOption(conf, 'pairs') let ranges = cm.listSelections() for (let i = 0; i < ranges.length; i++) { if (!ranges[i].empty()) return CodeMirror.Pass let around = charsAround(cm, ranges[i].head) if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass } for (let i = ranges.length - 1; i >= 0; i--) { let cur = ranges[i].head cm.replaceRange('', Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1), '+delete') } } function handleEnter(cm) { let conf = getConfig(cm) let explode = conf && getOption(conf, 'explode') if (!explode || cm.getOption('disableInput')) return CodeMirror.Pass let ranges = cm.listSelections() for (let i = 0; i < ranges.length; i++) { if (!ranges[i].empty()) return CodeMirror.Pass let around = charsAround(cm, ranges[i].head) if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass } cm.operation(function () { let linesep = cm.lineSeparator() || '\n' cm.replaceSelection(linesep + linesep, null) moveSel(cm, -1) ranges = cm.listSelections() for (let i = 0; i < ranges.length; i++) { let line = ranges[i].head.line cm.indentLine(line, null, true) cm.indentLine(line + 1, null, true) } }) } function moveSel(cm, dir) { let newRanges = [], ranges = cm.listSelections(), primary = 0 for (let i = 0; i < ranges.length; i++) { let range = ranges[i] if (range.head == cm.getCursor()) primary = i let pos = range.head.ch || dir > 0 ? { line: range.head.line, ch: range.head.ch + dir } : { line: range.head.line - 1 } newRanges.push({ anchor: pos, head: pos }) } cm.setSelections(newRanges, primary) } function contractSelection(sel) { let inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0 return { anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)), head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1)), } } function handleChar(cm, ch) { let conf = getConfig(cm) if (!conf || cm.getOption('disableInput')) return CodeMirror.Pass let pairs = getOption(conf, 'pairs') let pos = pairs.indexOf(ch) if (pos == -1) return CodeMirror.Pass let closeBefore = getOption(conf, 'closeBefore') let triples = getOption(conf, 'triples') let identical = pairs.charAt(pos + 1) == ch let ranges = cm.listSelections() let opening = pos % 2 == 0 let type for (let i = 0; i < ranges.length; i++) { let range = ranges[i], cur = range.head, curType let next = cm.getRange(cur, Pos(cur.line, cur.ch + 1)) if (opening && !range.empty()) { curType = 'surround' } else if ((identical || !opening) && next == ch) { if (identical && stringStartsAfter(cm, cur)) curType = 'both' else if ( triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch ) curType = 'skipThree' else curType = 'skip' } else if ( identical && cur.ch > 1 && triples.indexOf(ch) >= 0 && cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch ) { if (cur.ch > 2 && /\bstring/.test(cm.getTokenTypeAt(Pos(cur.line, cur.ch - 2)))) return CodeMirror.Pass curType = 'addFour' } else if (identical) { let prev = cur.ch == 0 ? ' ' : cm.getRange(Pos(cur.line, cur.ch - 1), cur) if (!CodeMirror.isWordChar(next) && prev != ch && !CodeMirror.isWordChar(prev)) curType = 'both' else return CodeMirror.Pass } else if ( opening && (next.length === 0 || /\s/.test(next) || closeBefore.indexOf(next) > -1) ) { curType = 'both' } else { return CodeMirror.Pass } if (!type) type = curType else if (type != curType) return CodeMirror.Pass } let left = pos % 2 ? pairs.charAt(pos - 1) : ch let right = pos % 2 ? ch : pairs.charAt(pos + 1) cm.operation(function () { if (type == 'skip') { moveSel(cm, 1) } else if (type == 'skipThree') { moveSel(cm, 3) } else if (type == 'surround') { let sels = cm.getSelections() for (let i = 0; i < sels.length; i++) sels[i] = left + sels[i] + right cm.replaceSelections(sels, 'around') sels = cm.listSelections().slice() for (let i = 0; i < sels.length; i++) sels[i] = contractSelection(sels[i]) cm.setSelections(sels) } else if (type == 'both') { cm.replaceSelection(left + right, null) cm.triggerElectric(left + right) moveSel(cm, -1) } else if (type == 'addFour') { cm.replaceSelection(left + left + left + left, 'before') moveSel(cm, 1) } }) } function charsAround(cm, pos) { let str = cm.getRange(Pos(pos.line, pos.ch - 1), Pos(pos.line, pos.ch + 1)) return str.length == 2 ? str : null } function stringStartsAfter(cm, pos) { let token = cm.getTokenAt(Pos(pos.line, pos.ch + 1)) return ( /\bstring/.test(token.type) && token.start == pos.ch && (pos.ch == 0 || !/\bstring/.test(cm.getTokenTypeAt(pos))) ) } ================================================ FILE: lib/custom/modes/apache.js ================================================ // CodeMirror, copyright (c) by Marijn Haverbeke and others // Distributed under an MIT license: http://codemirror.net/LICENSE // Apache mode by gloony const CodeMirror = require('codemirror') CodeMirror.defineMode('apache', function (/* config */) { return { token: function (stream, state) { var sol = stream.sol() || state.afterSection var eol = stream.eol() state.afterSection = false if (sol) { if (state.nextMultiline) { state.inMultiline = true state.nextMultiline = false } else { state.position = 'def' } } if (eol && !state.nextMultiline) { state.inMultiline = false state.position = 'def' } if (sol) { while (stream.eatSpace()) { /* pass */ } } var ch = stream.next() if (sol && ch === '#') { state.position = 'comment' stream.skipToEnd() return 'comment' } else if (ch === '!' && stream.peek() !== ' ') { return 'number' } else if (ch === ' ') { if (stream.peek() === '[') { if (stream.skipTo(']')) { stream.next() } else { stream.skipToEnd() } return 'keyword' } else if (stream.peek() === '(') { if (stream.skipTo(')')) { stream.next() } else { stream.skipToEnd() } return 'string' } else { state.position = 'unit' return 'unit' } } else if (ch === '"') { if (stream.skipTo('"')) { stream.next() } else { stream.skipToEnd() } return 'quote' } else if (sol && ch === '<') { if (stream.skipTo('>')) { stream.next() } else { stream.skipToEnd() } return 'meta' } else if (ch === '%') { if (stream.peek() === '{') { if (stream.skipTo('}')) { stream.next() } else { stream.skipToEnd() } return 'operator' } } else if (ch === '$') { if (!isNaN(stream.peek()) && stream.peek() !== ' ') { while (!isNaN(stream.peek()) && stream.peek() !== ' ') { stream.next() } return 'operator' } } else if (ch === '\\') { if (stream.peek() === '.') { if (stream.skipTo(' ')) { stream.next() } else { stream.skipToEnd() } return 'string' } } else if (ch === '.') { if (stream.peek() === '*') { if (stream.skipTo(' ')) { stream.next() } else { stream.skipToEnd() } return 'string' } } else if (ch === '^') { if (stream.skipTo(' ')) { stream.next() } else { stream.skipToEnd() } return 'string' } return state.position }, // electricInput: /<\/[\s\w:]+>$/, lineComment: '#', fold: 'brace', startState: function () { return { position: 'def', nextMultiline: false, inMultiline: false, afterSection: false, } }, } }) CodeMirror.defineMIME('text/apache', 'apache') CodeMirror.defineMIME('text/htaccess', 'apache') ================================================ FILE: lib/custom/modes/elixir.js ================================================ // Require Codemirror elixir mode from npm modules and register it here import 'codemirror-mode-elixir' ================================================ FILE: lib/custom/modes/graphql.js ================================================ import 'codemirror-graphql/mode' ================================================ FILE: lib/custom/modes/nim.js ================================================ const CodeMirror = require('codemirror') CodeMirror.defineMode('nim', function (conf, parserConf) { var ERRORCLASS = 'error' function wordRegexp(words) { return new RegExp('^((' + words.join(')|(') + '))\\b') } var ops = [ '=', '+', '-', '*', '/', '<', '>', '@', '$', '~', '&', '%', '|', '?', '^', ':', '\\', '[', ']', '(', ')', ',', '{', '}', '.\\.', '.', ] var operators = new RegExp( ops .map(function (op) { return '\\' + op }) .join('|') ) var identifiers = new RegExp('^[_A-Za-z][_A-Za-z0-9]*') var commonkeywords = [ 'addr', 'asm', 'atomic', 'bind', 'block', 'break', 'case', 'cast', 'const', 'continue', 'converter', 'discard', 'distinct', 'do', 'elif', 'else', 'end', 'enum', 'except', 'export', 'finally', 'for', 'from', 'generic', 'if', 'import', 'include', 'interface', 'iterator', 'lambda', 'let', 'macro', 'method', 'mixin', 'nil', 'object', 'out', 'proc', 'ptr', 'raise', 'ref', 'return', 'shared', 'static', 'template', 'try', 'tuple', 'type', 'using', 'var', 'when', 'while', 'with', 'without', 'yield', // keyword operators 'shl', 'shr', 'and', 'or', 'xor', 'not', 'div', 'mod', 'is', 'isnot', 'in', 'as', 'of', ] var commonBuiltins = [ 'int', 'int8', 'int16', 'int32', 'int64', 'uint', 'uint8', 'uint16', 'uint32', 'uint64', 'float', 'float32', 'float64', 'bool', 'char', 'string', 'cstring', 'pointer', 'range', 'array', 'openarray', 'seq', 'set', 'Byte', 'Natural', 'Positive', 'TObject', 'PObject', 'Conversion', 'TResult', 'TAddress', 'BiggestInt', 'BiggestFloat', 'cchar', 'cschar', 'cshort', 'cint', 'csize', 'cuchar', 'cushort', 'clong', 'clonglong', 'cfloat', 'cdouble', 'clongdouble', 'cuint', 'culong', 'culonglong', 'cchar', 'cstringArray', 'TEndian', 'PFloat32', 'PFloat64', 'PInt64', 'PInt32', 'TGC_Strategy', 'TFile', 'TFileMode', 'TFileHandle', 'isMainModule', 'CompileDate', 'CompileTime', 'cpuEndian', 'hostOS', 'hostCPU', 'inf', 'neginf', 'nan', 'QuitSuccess', 'QuitFailure', 'dbgLineHook', 'stdin', 'stdout', 'stderr', 'defined', 'new', 'high', 'low', 'sizeof', 'succ', 'pred', 'inc', 'dec', 'newSeq', 'len', 'incl', 'excl', 'card', 'ord', 'chr', 'ze', 'ze64', 'toU8', 'toU16', 'toU32', 'abs', 'min', 'max', 'add', 'repr', 'contains', 'toFloat', 'toBiggestFloat', 'toInt', 'toBiggestInt', 'addQuitProc', 'copy', 'setLen', 'newString', 'zeroMem', 'copyMem', 'moveMem', 'equalMem', 'alloc', 'alloc0', 'realloc', 'dealloc', 'setLen', 'assert', 'swap', 'getRefcount', 'getCurrentException', 'Msg', 'getOccupiedMem', 'getFreeMem', 'getTotalMem', 'isNil', 'seqToPtr', 'find', 'pop', 'GC_disable', 'GC_enable', 'GC_fullCollect', 'GC_setStrategy', 'GC_enableMarkAnd', 'Sweep', 'GC_disableMarkAnd', 'Sweep', 'GC_getStatistics', 'GC_ref', 'GC_ref', 'GC_ref', 'GC_unref', 'GC_unref', 'GC_unref', 'quit', 'OpenFile', 'OpenFile', 'CloseFile', 'EndOfFile', 'readChar', 'FlushFile', 'readFile', 'write', 'readLine', 'writeln', 'writeln', 'getFileSize', 'ReadBytes', 'ReadChars', 'readBuffer', 'writeBytes', 'writeChars', 'writeBuffer', 'setFilePos', 'getFilePos', 'fileHandle', 'countdown', 'countup', 'items', 'lines', 'true', 'false', // exceptions 'E_Base', 'EAsynch', 'ESynch', 'ESystem', 'EIO', 'EOS', 'ERessourceExhausted', 'EArithmetic', 'EDivByZero', 'EOverflow', 'EAccessViolation', 'EAssertionFailed', 'EControlC', 'EInvalidValue', 'EOutOfMemory', 'EInvalidIndex', 'EInvalidField', 'EOutOfRange', 'EStackOverflow', 'ENoExceptionToReraise', 'EInvalidObjectAssignment', 'EInvalidObject', 'EInvalidLibrary', 'EInvalidKey', 'EInvalidObjectConversion', 'EFloatingPoint', 'EFloatInvalidOp', 'EFloatDivByZero', 'EFloatOverflow', 'EFloatInexact', 'EDeadThrea', ] if (parserConf.extra_keywords != undefined) commonkeywords = commonkeywords.concat(parserConf.extra_keywords) if (parserConf.extra_builtins != undefined) commonBuiltins = commonBuiltins.concat(parserConf.extra_builtins) var keywords = wordRegexp(commonkeywords) var builtins = wordRegexp(commonBuiltins) var indentInfo = null var stringPrefixes = new RegExp('^((\'{3}|"{3}|[\'"]))', 'i') // tokenizers function tokenBase(stream, state) { // Handle scope changes if (stream.sol()) { var scopeOffset = state.scopes[0].offset if (stream.eatSpace()) { var lineOffset = stream.indentation() if (lineOffset > scopeOffset) { indentInfo = 'indent' } else if (lineOffset < scopeOffset) { indentInfo = 'dedent' } return null } else { if (scopeOffset > 0) { dedent(stream, state) } } } if (stream.eatSpace()) return null var ch = stream.peek() // Handle Comments if (ch === '#') { stream.skipToEnd() return 'comment' } // Handle Number Literals if (stream.match(/^[0-9.]/, false)) { var floatLiteral = false // Floats if (stream.match(/^\d*\.\d+(e[+-]?\d+)?/i)) { floatLiteral = true } if (stream.match(/^\d+\.\d*/)) { floatLiteral = true } if (stream.match(/^\.\d+/)) { floatLiteral = true } if (floatLiteral) { // Float literals may be "imaginary" stream.eat(/J/i) return 'number' } // Integers var intLiteral = false // Hex if (stream.match(/^0x[0-9a-f]+/i)) { intLiteral = true } // Binary if (stream.match(/^0b[01]+/i)) { intLiteral = true } // Octal if (stream.match(/^0o[0-7]+/i)) { intLiteral = true } // Decimal if (stream.match(/^[1-9]\d*(e[+-]?\d+)?/)) { // Decimal literals may be "imaginary" stream.eat(/J/i) intLiteral = true } // Zero by itself with no other piece of number. if (stream.match(/^0(?![\dx])/i)) { intLiteral = true } if (intLiteral) { // Integer literals may be "long" stream.eat(/L/i) return 'number' } } // Handle Strings if (stream.match(stringPrefixes)) { state.tokenize = tokenStringFactory(stream.current()) return state.tokenize(stream, state) } if (stream.match(operators)) return 'operator' if (stream.match(keywords)) return 'keyword' if (stream.match(builtins)) return 'builtin' if (stream.match(identifiers)) { if ( state.lastToken != null && state.lastToken.match(/proc|iterator|macro|template|class|converter/) ) { return 'def' } return 'variable' } // Handle non-detected items stream.next() return ERRORCLASS } function tokenStringFactory(delimiter) { var singleline = delimiter.length == 1 var OUTCLASS = 'string' function tokenString(stream, state) { while (!stream.eol()) { stream.eatWhile(/[^'"\\]/) if (stream.eat('\\')) { stream.next() if (singleline && stream.eol()) { return OUTCLASS } } else if (stream.match(delimiter)) { state.tokenize = tokenBase return OUTCLASS } else { stream.eat(/['"]/) } } if (singleline) { if (parserConf.singleLineStringErrors) { return ERRORCLASS } else { state.tokenize = tokenBase } } return OUTCLASS } tokenString.isString = true return tokenString } function indent(stream, state, type) { type = type || 'nim' var indentUnit = 0 if (type === 'nim') { if (state.scopes[0].type !== 'nim') { state.scopes[0].offset = stream.indentation() return } for (var i = 0; i < state.scopes.length; ++i) { if (state.scopes[i].type === 'nim') { indentUnit = state.scopes[i].offset + conf.indentUnit break } } } else { indentUnit = stream.column() + stream.current().length } state.scopes.unshift({ offset: indentUnit, type: type, }) } function dedent(stream, state, type) { type = type || 'nim' if (state.scopes.length == 1) return if (state.scopes[0].type === 'nim') { var _indent = stream.indentation() var _indent_index = -1 for (var i = 0; i < state.scopes.length; ++i) { if (_indent === state.scopes[i].offset) { _indent_index = i break } } if (_indent_index === -1) { return true } while (state.scopes[0].offset !== _indent) { state.scopes.shift() } return false } else { if (type === 'nim') { state.scopes[0].offset = stream.indentation() return false } else { if (state.scopes[0].type != type) { return true } state.scopes.shift() return false } } } function tokenLexer(stream, state) { indentInfo = null var style = state.tokenize(stream, state) var current = stream.current() // Handle '.' connected identifiers if (current === '.') { style = stream.match(identifiers, false) ? null : ERRORCLASS if (style === null && state.lastStyle === 'meta') { // Apply 'meta' style to '.' connected identifiers when // appropriate. style = 'meta' } return style } if ((style === 'variable' || style === 'builtin') && state.lastStyle === 'meta') { style = 'meta' } // Handle scope changes. if (current.match(/return|break|continue|raise/) || (current === 'discard' && stream.eol())) state.dedent += 1 if (current === 'lambda' || current === 'proc') state.lambda = true var delimiter_index = '[({'.indexOf(current) if (delimiter_index !== -1) { indent(stream, state, '])}'.slice(delimiter_index, delimiter_index + 1)) } else if (stream.eol() && current.match(/=|:|import|include|type|const|var|let/)) { indent(stream, state) } if (indentInfo === 'dedent') { if (dedent(stream, state)) { return ERRORCLASS } } delimiter_index = '])}'.indexOf(current) if (delimiter_index !== -1) { if (dedent(stream, state, current)) { return ERRORCLASS } } if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'nim') { if (state.scopes.length > 1) state.scopes.shift() state.dedent -= 1 } return style } var external = { startState: function (basecolumn) { return { tokenize: tokenBase, scopes: [{ offset: basecolumn || 0, type: 'nim' }], lastStyle: null, lastToken: null, lambda: false, dedent: 0, } }, token: function (stream, state) { var style = tokenLexer(stream, state) state.lastStyle = style var current = stream.current() if (current && style) state.lastToken = current if (stream.eol() && state.lambda) state.lambda = false return style }, indent: function (state) { if (state.tokenize != tokenBase) return state.tokenize.isString ? CodeMirror.Pass : 0 return state.scopes[0].offset }, lineComment: '#', fold: 'indent', } return external }) CodeMirror.defineMIME('text/x-nim', 'nim') ================================================ FILE: lib/custom/modes/riscv.js ================================================ /* RISC-V Code Mirror Mode Based on the mode present in the Venus Simulator Author: kvakil Source: https://github.com/kvakil/venus Forked by Matthew Nielsen (github.com/matthewnielsen27) */ const CodeMirror = require('codemirror') CodeMirror.defineMode('riscv', function (/* config */) { function regexFromWords(words, ins) { return new RegExp('^(?:' + words.join('|') + ')$', ins) } // Instructions // Part 1) Base Integer Instructions // a) Loads // b) Stores // c) Shifts // d) Arithmetic // e) Logical // f) Compare // g) Branches // h) Jump & Link // i) Synch // j) System // k) Counters // Part 2) RV Privileged Instructions // a) CSR Access // b) Change Level // c) Trap Redirect // Part 3) Optional Multiply-Divide Instruction Extension: RVM // a) Multiply // b) Divide // c) Remainder // Part 4) Pseudo Instructions // a) Standard // b) Non-Standard // Part 5) Optional Compressed (16-bit) Instruction Extension: RVC // a) Loads // b) Stores // c) Arithmetic // d) Shifts // e) Branches // f) Jump // g) Jump & Link // h) System // Part 6) Optional Atomic Instruction Extension: RVA // a) Load // b) Store // c) Swap // d) Add // e) Logical // f) Min\Max // Part 7) Optional Floating-Point Instruction Extension: RVF, RVD, & RVQ // a) Move // b) Convert // c) Load // d) Store // e) Arithmetic // f) Mui-Add // g) Sign Inject // h) Min/Max // i) Compare // j) Categorization // k) Configuration var instructions = regexFromWords( [ // Part 1) Base Integer Instructions // a) Loads // I) RV32I 'lb', 'lh', 'lw', 'lbu', 'lhu', // II) RV64I and RV128I 'ld', 'lq', 'lwu', 'ldu', // b) Stores // I) RV32I 'sb', 'sh', 'sw', // II) RV64I and RV128I 'sd', 'sq', // c) Shifts // I) RV32I 'sll', 'slli', 'srl', 'srli', 'sra', 'srai', // II) RV64I and RV128I 'sllw', 'slliw', 'srlw', 'srliw', 'sraw', 'sraiw', 'slld', 'sllid', 'srld', 'srlid', 'srad', 'sraid', // d) Arithmetic // I) RV32I 'add', 'addi', 'sub', 'lui', 'auipc', // II) RV64I and RV128I 'addw', 'addiw', 'subw', 'addd', 'addid', 'subd', // e) Logical 'xor', 'xori', 'or', 'ori', 'and', 'andi', // f) Compare 'slt', 'slti', 'sltu', 'sltiu', // g) Branches 'beq', 'bne', 'blt', 'bge', 'bltu', 'bgeu', // h) Jump & Link 'jal', 'jalr', // i) Synch 'fence', 'fence.i', // j) System 'scall', 'sbreak', // k) Counters 'rdcycle', 'rdcycleh', 'rdtime', 'rdtimeh', 'rdinstret', 'rdinstreth', // Part 2) RV Privileged Instructions // a) CSR Access 'csrrw', 'csrrs', 'csrrc', 'csrrwi', 'csrrsi', 'csrrci', // b) Change Level 'ecall', 'ebreak', 'eret', // c) Trap Redirect 'mrts', 'mrth', 'hrts', // Part 3) Optional Multiply-Divide Instruction Extension: RVM // a) Multiply // I) RV32M 'mul', 'mulh', 'mulhsu', // II) RV64M and RV128M 'mulw', 'muld', // b) Divide // I) RV32M 'div', 'divu', // II) RV64M and RV128M 'divw', 'divd', // c) Remainder // I) RV32M 'rem', 'remu', // II) RV64M and RV128M 'remw', 'remuw', 'remd', 'remud', // Part 4) Pseudo Instructions // a) Standard Pseudo Instructions 'beqz', 'bgez', 'bgt', 'bgtu', 'bgtz', 'ble', 'bleu', 'blez', 'bltz', 'bnez', 'call', 'j', 'jr', 'la', 'li', 'mv', 'neg', 'nop', 'ret', 'not', 'ret', 'seqz', 'sgtz', 'sltz', 'snez', 'tail', // b) Non-Standard Pseudo Instructions 'seq', 'sge', 'sgeu', 'sgt', 'sgtu', 'sle', 'sleu', 'sne', // Part 5) Optional Compressed (16-bit) Instruction Extension: RVC // a) Loads 'c.lw', 'c.lwsp', 'c.ld', 'c.ldsp', 'c.lq', 'c.lqsp', // b) Stores 'c.sw', 'c.swsp', 'c.sd', 'c.sdsp', 'c.sq', 'c.sqsp', // c) Arithmetic 'c.add', 'c.addw', 'c.addi', 'c.addiw', 'c.addi16sp', 'c.addi2spn', 'c.li', 'c.lui', 'c.mv', 'c.sub', // d) Shifts 'c.slli', // e) Branches 'c.beqz', 'c.bnez', // f) Jump 'c.j', 'c.jr', // g) Jump & Link 'c.jal', 'c.jalr', // h) System 'c.ebreak', // Part 6) Optional Atomic Instruction Extrnsion: RVA // a) Load // I) RV32A 'lr.w', // II) RV64A and RV128A 'lr.d', 'lr.q', // b) Store // I) RV32A 'sc.w', // II) RV64A and RV128A 'sc.d', 'sc.q', // c) Swap // I) RV32A 'amoswap.w', // II) RV64A and RV128A 'amoswap.d', 'amoswap.q', // d) Add // I) RV32A 'amoadd.w', // II) RV64A and RV128A 'amoadd.d', 'amoadd.q', // e) Logical // I) RV32A 'amoxor.w', 'amoand.w', 'amoor.w', // II) RV64A and RV128A 'amoxor.d', 'amoand.d', 'amoor.d', 'amoxor.q', 'amoand.q', 'amoor.q', // f) Min\Max // I) RV32A 'amomin.w', 'amomax.w', 'amominu.w', 'amomax.w', // II) RV64A and RV128A 'amomin.d', 'amomax.d', 'amominu.d', 'amomax.d', 'amomin.q', 'amomax.q', 'amominu.q', 'amomax.q', // Part 7) Optional Floating-Point Instruction Extension: RVF, RVD, & RVQ // a) Move // I) RV32- 'fmv.h.x', 'fmv.s.s', 'fmv.x.h', 'fmv.x.s', // II) RV64- and RV128- 'fmv.d.x', 'fmv.q.s', 'fmv.d.h', 'fmv.q.s', // b) Convert // I) RV32- 'fcvt.h.w', 'fcvt.s.w', 'fcvt.d.w', 'fcvt.q.w', 'fcvt.h.wu', 'fcvt.s.wu', 'fcvt.d.wu', 'fcvt.q.wu', 'fcvt.w.h', 'fcvt.w.s', 'fcvt.w.d', 'fcvt.w.q', 'fcvt.wu.h', 'fcvt.w.s', 'fcvt.w.d', 'fcvt.w.q', // II) RV64- and RV128- 'fcvt.h.l', 'fcvt.h.t', 'fcvt.h.lu', 'fcvt.h.tu', 'fcvt.s.l', 'fcvt.s.t', 'fcvt.s.lu', 'fcvt.s.tu', 'fcvt.d.l', 'fcvt.d.t', 'fcvt.d.lu', 'fcvt.d.tu', 'fcvt.q.l', 'fcvt.q.t', 'fcvt.q.lu', 'fcvt.q.tu', 'fcvt.l.h', 'fcvt.t.h', 'fcvt.lu.h', 'fcvt.tu.h', 'fcvt.l.s', 'fcvt.t.s', 'fcvt.lu.s', 'fcvt.tu.s', 'fcvt.l.d', 'fcvt.t.d', 'fcvt.lu.d', 'fcvt.tu.d', 'fcvt.l.q', 'fcvt.t.q', 'fcvt.lu.q', 'fcvt.tu.q', // c) Load 'flw', 'fld', 'flq', // d) Store 'fsw', 'fsd', 'fsq', // e) Arithmetic 'fadd.s', 'fsub.s', 'fmul.s', 'fdiv.s', 'fsqrt.s', 'fadd.d', 'fsub.d', 'fmul.d', 'fdiv.d', 'fsqrt.d', 'fadd.q', 'fsub.q', 'fmul.q', 'fdiv.q', 'fsqrt.q', // f) Mul-Add 'fmadd.d', 'fmsub.d', 'fnmsub.d', 'fnmadd.d', 'fmadd.d', 'fmsub.d', 'fnmsub.d', 'fnmadd.d', 'fmadd.q', 'fmsub.q', 'fnmsub.q', 'fnmadd.q', // g) Sign Inject 'fsgnj.s', 'fsgnjn.s', 'fsgnjx.s', 'fsgnj.d', 'fsgnjn.d', 'fsgnjx.d', 'fsgnj.q', 'fsgnjn.q', 'fsgnjx.q', // h) Min/Max 'fmin.s', 'fmax.s', 'fmin.d', 'fmax.d', 'fmin.q', 'fmax.q', // i) Compare 'feq.s', 'flt.s', 'fle.s', 'feq.d', 'flt.d', 'fle.d', 'feq.q', 'flt.q', 'fle.q', // j) Categorization 'fclass.s', 'fclass.d', 'fclass.q', // k) Configuration 'frcsr', 'frrm', 'frflags', 'fscsr', 'fsrm', 'fsflags', 'fsrmi', 'fsflagsi', ], 'i' ) // Registers // Part 1) Actual Register Values // Part 2) Application Binary Interface var registers = regexFromWords( [ // Part 1) Actual Register Values 'x0', 'x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8', 'x9', 'x10', 'x11', 'x12', 'x13', 'x14', 'x15', 'x16', 'x17', 'x18', 'x19', 'x20', 'x21', 'x22', 'x23', 'x24', 'x25', 'x26', 'x27', 'x28', 'x29', 'x30', 'x31', // Part 2) Application Binary Interface 'zero', 'ra', 'sp', 'gp', 'tp', 't0', 't1', 't2', 's0', 's1', 'a0', 'a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11', 't3', 't4', 't5', 't6', 'pc', ], '' ) // Keywords // Part 1) Pseudo Operations var keywords = regexFromWords( [ // Part 1) Pseudo Operations '.align', '.file', '.globl', '.local', '.comm', '.common', '.ident', '.section', '.size', '.text', '.data', '.rodata', '.bss', '.string', '.asciz', '.asciiz', '.equ', '.macro', '.endm', '.type', '.option', '.byte', '.2byte', '.half', '.short', '.4byte', '.word', '.long', '.8byte', '.dword', '.quad', '.dtprelword', '.dtpreldword', '.sleb128', '.uleb128', '.p2align', '.balign', '.zero', '.float', '.double', ], 'i' ) function normal(stream, state) { var ch = stream.next() if (ch == '#') { stream.skipToEnd() return 'comment' } if (ch == '"' || ch == "'") { state.cur = string(ch) return state.cur(stream, state) } if (/\d/.test(ch)) { stream.eatWhile(/[\w.%]/) // Handle numeric labels if (stream.peek() === ':') { return 'variable' } return 'number' } if (/[.\w_]/.test(ch)) { stream.eatWhile(/[\w\\\-_.]/) return 'variable' } return null } function string(quote) { return function (stream, state) { var escaped = false, ch while ((ch = stream.next()) != null) { if (ch == quote && !escaped) break escaped = !escaped && ch == '\\' } if (!escaped) state.cur = normal return 'string' } } return { startState: function (basecol) { return { basecol: basecol || 0, indentDepth: 0, cur: normal } }, token: function (stream, state) { if (stream.eatSpace()) return null var style = state.cur(stream, state) var word = stream.current() if (style == 'variable') { if (keywords.test(word)) style = 'keyword' else if (instructions.test(word)) style = 'builtin' else if (registers.test(word)) style = 'variable-2' } return style }, } }) CodeMirror.defineMIME('text/riscv', 'riscv') ================================================ FILE: lib/custom/modes/solidity.js ================================================ /** * codemirror-solidity by alincode — https://github.com/alincode/codemirror-solidity * Distributed under MIT */ /* eslint-disable */ 'use strict' const CodeMirror = require('codemirror') CodeMirror.defineMode('solidity', function (config) { let indentUnit = config.indentUnit // let functionKeyword = 'function' // let functionNameKeyword = 'Name' // let leftBracketSign = '(' // let rightBracketSign = ')' // let functionVariableName = 'variable' // let keyWordContract = 'contract' let keywords = { pragma: true, solidity: true, import: true, as: true, from: true, contract: true, constructor: true, is: true, function: true, modifier: true, // modifiers pure: true, view: true, payable: true, constant: true, anonymous: true, indexed: true, returns: true, return: true, event: true, struct: true, mapping: true, interface: true, using: true, library: true, storage: true, memory: true, calldata: true, public: true, private: true, external: true, internal: true, emit: true, assembly: true, abstract: true, after: true, catch: true, final: true, in: true, inline: true, let: true, match: true, null: true, of: true, relocatable: true, static: true, try: true, typeof: true, var: true, } let keywordsSpecial = { pragma: true, returns: true, address: true, contract: true, function: true, struct: true, } let keywordsEtherUnit = { wei: true, szabo: true, finney: true, ether: true, } let keywordsTimeUnit = { seconds: true, minutes: true, hours: true, days: true, weeks: true, } let keywordsBlockAndTransactionProperties = { ['block']: ['coinbase', 'difficulty', 'gaslimit', 'number', 'timestamp'], ['msg']: ['data', 'sender', 'sig', 'value'], ['tx']: ['gasprice', 'origin'], } let keywordsMoreBlockAndTransactionProperties = { now: true, gasleft: true, blockhash: true, } let keywordsErrorHandling = { assert: true, require: true, revert: true, throw: true, } let keywordsMathematicalAndCryptographicFuctions = { addmod: true, mulmod: true, keccak256: true, sha256: true, ripemd160: true, ecrecover: true, } let keywordsContractRelated = { this: true, selfdestruct: true, super: true, } let keywordsTypeInformation = { type: true } let keywordsContractList = {} let keywordsControlStructures = { if: true, else: true, while: true, do: true, for: true, break: true, continue: true, switch: true, case: true, default: true, } let keywordsValueTypes = { bool: true, byte: true, string: true, enum: true, address: true, } let keywordsV0505NewReserve = { alias: true, apply: true, auto: true, copyof: true, define: true, immutable: true, implements: true, macro: true, mutable: true, override: true, partial: true, promise: true, reference: true, sealed: true, sizeof: true, supports: true, typedef: true, unchecked: true, } let keywordsAbiEncodeDecodeFunctions = { ['abi']: ['decode', 'encodePacked', 'encodeWithSelector', 'encodeWithSignature', 'encode'], } let keywordsMembersOfAddressType = [ 'transfer', 'send', 'balance', 'call', 'delegatecall', 'staticcall', ] let natSpecTags = ['title', 'author', 'notice', 'dev', 'param', 'return'] // let functionStructureStage = [{ // function: ['function', 'returns'] // }, // leftBracketSign, // parameterName, // parameterValue, // rightBracketSign, // ]; let atoms = { delete: true, new: true, true: true, false: true, // "iota": true, "nil": true, "append": true, // "cap": true, "close": true, "complex": true, "copy": true, "imag": true, // "make": true, "panic": true, "print": true, // "println": true, "real": true, "recover": true } let isOperatorChar = /[+\-*&^%:=<>!|\/~]/ let isNegativeChar = /[-]/ let curPunc function tokenBase(stream, state) { let ch = stream.next() if (ch == '"' || ch == "'" || ch == '`') { state.tokenize = tokenString(ch) return state.tokenize(stream, state) } if (isVersion(stream, state)) return 'version' if ( ch == '.' && keywordsMembersOfAddressType.some(function (item) { return stream.match(`${item}`) }) ) return 'addressFunction' if (isNumber(ch, stream)) return 'number' if (/[\[\]{}\(\),;\:\.]/.test(ch)) { return updateGarmmer(ch, state) } if (ch == '/') { if (stream.eat('*')) { state.tokenize = tokenComment return tokenComment(stream, state) } if (stream.match(/\/{2}/)) { while ((ch = stream.next())) { if (ch == '@') { stream.backUp(1) state.grammar = 'doc' break } } return 'doc' } if (stream.eat('/')) { stream.skipToEnd() return 'comment' } } if (isNegativeChar.test(ch)) { if (isNumber(stream.peek(), stream)) return 'number' return 'operator' } if (isOperatorChar.test(ch)) { stream.eatWhile(isOperatorChar) return 'operator' } stream.eatWhile(/[\w\$_\xa1-\uffff]/) let cur = stream.current() if (state.grammar == 'doc') { if ( natSpecTags.some(function (item) { return cur == `@${item}` }) ) return 'docReserve' return 'doc' } if (cur === 'solidity' && state.lastToken == 'pragma') { state.lastToken = state.lastToken + ' ' + cur } if (keywords.propertyIsEnumerable(cur)) { if (cur == 'case' || cur == 'default') curPunc = 'case' if (keywordsSpecial.propertyIsEnumerable(cur)) state.lastToken = cur //if (cur == 'function' && state.para == 'parameterMode') return 'keyword' } if (keywordsEtherUnit.propertyIsEnumerable(cur)) return 'etherUnit' if (keywordsContractRelated.propertyIsEnumerable(cur)) return 'contractRelated' if ( keywordsControlStructures.propertyIsEnumerable(cur) || keywordsTypeInformation.propertyIsEnumerable(cur) || keywordsV0505NewReserve.propertyIsEnumerable(cur) ) return 'keyword' if ( keywordsValueTypes.propertyIsEnumerable(cur) || keywordsTimeUnit.propertyIsEnumerable(cur) || isValidInteger(cur) || isValidBytes(cur) || isValidFixed(cur) ) { state.lastToken = state.lastToken + 'variable' return 'keyword' } if (atoms.propertyIsEnumerable(cur)) return 'atom' if (keywordsErrorHandling.propertyIsEnumerable(cur)) return 'errorHandling' if (keywordsMathematicalAndCryptographicFuctions.propertyIsEnumerable(cur)) return 'mathematicalAndCryptographic' if ( keywordsMoreBlockAndTransactionProperties.propertyIsEnumerable(cur) || (keywordsBlockAndTransactionProperties.hasOwnProperty(cur) && keywordsBlockAndTransactionProperties[cur].some(function (item) { return stream.match(`.${item}`) })) ) return 'variable-2' if ( keywordsAbiEncodeDecodeFunctions.hasOwnProperty(cur) && keywordsAbiEncodeDecodeFunctions[cur].some(function (item) { return stream.match(`.${item}`) }) ) return 'abi' let style = updateHexLiterals(cur, stream) if (style != null) return style if ( (state.lastToken == 'functionName(' || state.lastToken == 'returns(') && keywordsContractList.propertyIsEnumerable(cur) ) { state.lastToken += 'variable' return 'variable' } if (state.lastToken == 'function') { state.lastToken = 'functionName' if (state.para == null) { state.grammar = 'function' state.para = '' } //state.parasMode = isNaN(state.parasMode) ? 1 : state.functionLayerCount++; state.para += 'functionName' return 'functionName' } if (state.lastToken == 'functionName(variable') { state.lastToken = 'functionName(' return 'parameterValue' } if (state.lastToken == 'returns(variable') { state.lastToken = 'returns(' return 'parameterValue' } if (state.lastToken == 'address' && cur == 'payable') { state.lastToken = 'address payable' } if (state.lastToken == 'contract' || state.lastToken == 'struct') { keywordsContractList[cur] = true state.lastToken = null } if (state.grammar == 'function') { return 'parameterValue' } return 'variable' } function tokenString(quote) { return function (stream, state) { let escaped = false, next, end = false while ((next = stream.next()) != null) { if (next == quote && !escaped) { end = true break } escaped = !escaped && quote != '`' && next == '\\' } if (end || !(escaped || quote == '`')) state.tokenize = tokenBase return 'string' } } function tokenComment(stream, state) { let maybeEnd = false, ch while ((ch = stream.next())) { if (ch == '/' && maybeEnd) { state.tokenize = tokenBase break } maybeEnd = ch == '*' } return 'comment' } function isVersion(stream, state) { if (state.lastToken == 'pragma solidity') { state.lastToken = null return ( !state.startOfLine && (stream.match(/[\^{0}][0-9\.]+/) || stream.match(/[\>\=]+?[\s]*[0-9\.]+[\s]*[\<]?[\s]*[0-9\.]+/)) ) } } function isNumber(ch, stream) { if (/[\d\.]/.test(ch)) { if (ch == '.') { stream.match(/^[0-9]+([eE][\-+]?[0-9]+)?/) } else if (ch == '0') { stream.match(/^[xX][0-9a-fA-F]+/) || stream.match(/^0[0-7]+/) } else { stream.match(/^[0-9]*\.?[0-9]*([eE][\-+]?[0-9]+)?/) } return true } } function isValidInteger(token) { if (token.match(/^[u]?int/)) { if (token.indexOf('t') + 1 == token.length) return true let numberPart = token.substr(token.indexOf('t') + 1, token.length) return numberPart % 8 === 0 && numberPart <= 256 } } function isValidBytes(token) { if (token.match(/^bytes/)) { if (token.indexOf('s') + 1 == token.length) return true let bytesPart = token.substr(token.indexOf('s') + 1, token.length) return bytesPart <= 32 } } function isValidFixed(token) { if (token.match(/^[u]?fixed([0-9]+x[0-9]+)?/)) { if (token.indexOf('d') + 1 == token.length) return true let numberPart = token.substr(token.indexOf('d') + 1, token.length).split('x') return numberPart[0] % 8 === 0 && numberPart[0] <= 256 && numberPart[1] <= 80 } } function updateHexLiterals(token, stream) { if (token.match(/^hex/) && stream.peek() == '"') { let maybeEnd = false, ch, hexValue = '', stringAfterHex = '' while ((ch = stream.next())) { stringAfterHex += ch if (ch == '"' && maybeEnd) { hexValue = stringAfterHex.substring(1, stringAfterHex.length - 1) if (hexValue.match(/^[0-9a-fA-F]+$/)) { return 'number' } else { stream.backUp(stringAfterHex.length) } break } maybeEnd = maybeEnd || ch == '"' } } } function updateGarmmer(ch, state) { if (ch == ',' && state.para == 'functionName(variable') { state.para = 'functionName(' } if (state.para != null && state.para.startsWith('functionName')) { if (ch == ')') { if (state.para.endsWith('(')) { state.para = state.para.substr(0, state.para.length - 1) if (state.para == 'functionName') state.grammar = '' } } else if (ch == '(') { state.para += ch } } if (ch == '(' && state.lastToken == 'functionName') { state.lastToken += ch } else if (ch == ')' && state.lastToken == 'functionName(') { state.lastToken = null } else if (ch == '(' && state.lastToken == 'returns') { state.lastToken += ch } else if ( ch == ')' && (state.lastToken == 'returns(' || state.lastToken == 'returns(variable') ) { state.lastToken = null } if (ch == '(' && state.lastToken == 'address') { state.lastToken += ch } curPunc = ch return null } function Context(indented, column, type, align, prev) { this.indented = indented this.column = column this.type = type this.align = align this.prev = prev } function pushContext(state, col, type) { return (state.context = new Context(state.indented, col, type, null, state.context)) } function popContext(state) { if (!state.context.prev) return let t = state.context.type if (t == ')' || t == ']' || t == '}') state.indented = state.context.indented return (state.context = state.context.prev) } // Interface return { startState: function (basecolumn) { return { tokenize: null, context: new Context((basecolumn || 0) - indentUnit, 0, 'top', false), indented: 0, startOfLine: true, } }, token: function (stream, state) { let ctx = state.context if (stream.sol()) { if (ctx.align == null) ctx.align = false state.indented = stream.indentation() state.startOfLine = true if (ctx.type == 'case') ctx.type = '}' if (state.grammar == 'doc') state.grammar = null } if (stream.eatSpace()) return null curPunc = null let style = (state.tokenize || tokenBase)(stream, state) if (style == 'comment') return style if (ctx.align == null) ctx.align = true if (curPunc == '{') pushContext(state, stream.column(), '}') else if (curPunc == '[') pushContext(state, stream.column(), ']') else if (curPunc == '(') pushContext(state, stream.column(), ')') else if (curPunc == 'case') ctx.type = 'case' else if (curPunc == '}' && ctx.type == '}') popContext(state) else if (curPunc == ctx.type) popContext(state) state.startOfLine = false return style }, indent: function (state, textAfter) { if (state.tokenize != tokenBase && state.tokenize != null) return CodeMirror.Pass let ctx = state.context, firstChar = textAfter && textAfter.charAt(0) if (ctx.type == 'case' && /^(?:case|default)\b/.test(textAfter)) { state.context.type = '}' return ctx.indented } let closing = firstChar == ctx.type if (ctx.align) return ctx.column + (closing ? 0 : 1) else return ctx.indented + (closing ? 0 : indentUnit) }, electricChars: '{}):', closeBrackets: '()[]{}\'\'""``', fold: 'brace', blockCommentStart: '/*', blockCommentEnd: '*/', lineComment: '//', } }) CodeMirror.defineMIME('text/x-solidity', 'solidity') ================================================ FILE: lib/dom-to-image.js ================================================ /* eslint-disable */ /** * https://github.com/tsayen/dom-to-image/blob/master/src/dom-to-image.js */ ;(function (global) { 'use strict' var util = newUtil() var inliner = newInliner() var fontFaces = newFontFaces() var images = newImages() // Default impl options var defaultOptions = { // Default is to fail on error, no placeholder imagePlaceholder: undefined, // Default cache bust is false, it will use the cache cacheBust: false, } var domtoimage = { toSvg: toSvg, toPng: toPng, toJpeg: toJpeg, toBlob: toBlob, toPixelData: toPixelData, impl: { fontFaces: fontFaces, images: images, util: util, inliner: inliner, options: {}, }, } if (typeof module !== 'undefined') module.exports = domtoimage else global.domtoimage = domtoimage /** * @param {Node} node - The DOM Node object to render * @param {Object} options - Rendering options * @param {Function} options.filter - Should return true if passed node should be included in the output * (excluding node means excluding it's children as well). Not called on the root node. * @param {String} options.bgcolor - color for the background, any valid CSS color value. * @param {Number} options.width - width to be applied to node before rendering. * @param {Number} options.height - height to be applied to node before rendering. * @param {Object} options.style - an object whose properties to be copied to node's style before rendering. * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only), defaults to 1.0. * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url * @return {Promise} - A promise that is fulfilled with a SVG image data URL * */ function toSvg(node, options) { options = options || {} copyOptions(options) return Promise.resolve(node) .then(function (node) { return cloneNode(node, options.filter, true) }) .then(embedFonts) .then(inlineImages) .then(applyOptions) .then(function (clone) { return makeSvgDataUri( clone, options.width || util.width(node), options.height || util.height(node), options.escapePercentSign ) }) function applyOptions(clone) { if (options.bgcolor) clone.style.backgroundColor = options.bgcolor if (options.width) clone.style.width = options.width + 'px' if (options.height) clone.style.height = options.height + 'px' if (options.style) Object.keys(options.style).forEach(function (property) { clone.style[property] = options.style[property] }) return clone } } /** * @param {Node} node - The DOM Node object to render * @param {Object} options - Rendering options, @see {@link toSvg} * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data. * */ function toPixelData(node, options) { return draw(node, options || {}).then(function (canvas) { return canvas.getContext('2d').getImageData(0, 0, util.width(node), util.height(node)).data }) } /** * @param {Node} node - The DOM Node object to render * @param {Object} options - Rendering options, @see {@link toSvg} * @return {Promise} - A promise that is fulfilled with a PNG image data URL * */ function toPng(node, options) { options = options || {} options.escapePercentSign = true return draw(node, options).then(function (canvas) { return canvas.toDataURL() }) } /** * @param {Node} node - The DOM Node object to render * @param {Object} options - Rendering options, @see {@link toSvg} * @return {Promise} - A promise that is fulfilled with a JPEG image data URL * */ function toJpeg(node, options) { options = options || {} return draw(node, options).then(function (canvas) { return canvas.toDataURL('image/jpeg', options.quality || 1.0) }) } /** * @param {Node} node - The DOM Node object to render * @param {Object} options - Rendering options, @see {@link toSvg} * @return {Promise} - A promise that is fulfilled with a PNG image blob * */ function toBlob(node, options) { options = options || {} options.escapePercentSign = true return draw(node, options).then(util.canvasToBlob) } function copyOptions(options) { // Copy options to impl options for use in impl if (typeof options.imagePlaceholder === 'undefined') { domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder } else { domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder } if (typeof options.cacheBust === 'undefined') { domtoimage.impl.options.cacheBust = defaultOptions.cacheBust } else { domtoimage.impl.options.cacheBust = options.cacheBust } } function draw(domNode, options) { return ( toSvg(domNode, options) .then(util.makeImage) // .then(util.delay(100)) .then(function (image) { var canvas = newCanvas(domNode) canvas.getContext('2d').drawImage(image, 0, 0) return canvas }) ) function newCanvas(domNode) { var canvas = document.createElement('canvas') canvas.width = options.width || util.width(domNode) canvas.height = options.height || util.height(domNode) if (options.bgcolor) { var ctx = canvas.getContext('2d') ctx.fillStyle = options.bgcolor ctx.fillRect(0, 0, canvas.width, canvas.height) } return canvas } } function cloneNode(node, filter, root) { if (!root && filter && !filter(node)) return Promise.resolve() return Promise.resolve(node) .then(makeNodeCopy) .then(function (clone) { return cloneChildren(node, clone, filter) }) .then(function (clone) { return processClone(node, clone) }) function makeNodeCopy(node) { if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL()) return node.cloneNode(false) } function cloneChildren(original, clone, filter) { var children = original.childNodes if (children.length === 0) return Promise.resolve(clone) return cloneChildrenInOrder(clone, util.asArray(children), filter).then(function () { return clone }) function cloneChildrenInOrder(parent, children, filter) { var done = Promise.resolve() children.forEach(function (child) { done = done .then(function () { return cloneNode(child, filter) }) .then(function (childClone) { if (childClone) parent.appendChild(childClone) }) }) return done } } function processClone(original, clone) { if (!(clone instanceof Element)) return clone return Promise.resolve() .then(cloneStyle) .then(clonePseudoElements) .then(copyUserInput) .then(fixSvg) .then(function () { return clone }) function cloneStyle() { copyStyle(window.getComputedStyle(original), clone.style) function copyStyle(source, target) { if (source.cssText) target.cssText = source.cssText else copyProperties(source, target) function copyProperties(source, target) { util.asArray(source).forEach(function (name) { target.setProperty( name, source.getPropertyValue(name), source.getPropertyPriority(name) ) }) } } } function clonePseudoElements() { ;[':before', ':after'].forEach(function (element) { clonePseudoElement(element) }) function clonePseudoElement(element) { var style = window.getComputedStyle(original, element) var content = style.getPropertyValue('content') if (content === '' || content === 'none') return var className = util.uid() clone.className = clone.className + ' ' + className var styleElement = document.createElement('style') styleElement.appendChild(formatPseudoElementStyle(className, element, style)) clone.appendChild(styleElement) function formatPseudoElementStyle(className, element, style) { var selector = '.' + className + ':' + element var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style) return document.createTextNode(selector + '{' + cssText + '}') function formatCssText(style) { var content = style.getPropertyValue('content') return style.cssText + ' content: ' + content + ';' } function formatCssProperties(style) { return util.asArray(style).map(formatProperty).join('; ') + ';' function formatProperty(name) { return ( name + ': ' + style.getPropertyValue(name) + (style.getPropertyPriority(name) ? ' !important' : '') ) } } } } } function copyUserInput() { if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value if (original instanceof HTMLInputElement) clone.setAttribute('value', original.value) } function fixSvg() { if (!(clone instanceof SVGElement)) return clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg') if (!(clone instanceof SVGRectElement)) return ;['width', 'height'].forEach(function (attribute) { var value = clone.getAttribute(attribute) if (!value) return clone.style.setProperty(attribute, value) }) } } } function embedFonts(node) { return fontFaces.resolveAll().then(function (cssText) { var styleNode = document.createElement('style') node.appendChild(styleNode) styleNode.appendChild(document.createTextNode(cssText)) return node }) } function inlineImages(node) { return images.inlineAll(node).then(function () { return node }) } function makeSvgDataUri(node, width, height, escapePercentSign) { return Promise.resolve(node) .then(function (node) { node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml') return new XMLSerializer().serializeToString(node) }) .then(function (str) { return util.escapeXhtml(str, escapePercentSign) }) .then(function (xhtml) { return '' + xhtml + '' }) .then(function (foreignObject) { return ( '' + foreignObject + '' ) }) .then(function (svg) { return 'data:image/svg+xml;charset=utf-8,' + svg }) } function newUtil() { return { escape: escape, parseExtension: parseExtension, mimeType: mimeType, dataAsUrl: dataAsUrl, isDataUrl: isDataUrl, canvasToBlob: canvasToBlob, resolveUrl: resolveUrl, getAndEncode: getAndEncode, uid: uid(), delay: delay, asArray: asArray, escapeXhtml: escapeXhtml, makeImage: makeImage, width: width, height: height, } function mimes() { /* * Only WOFF and EOT mime types for fonts are 'real' * see http://www.iana.org/assignments/media-types/media-types.xhtml */ var WOFF = 'application/font-woff' var JPEG = 'image/jpeg' return { woff: WOFF, woff2: WOFF, ttf: 'application/font-truetype', eot: 'application/vnd.ms-fontobject', png: 'image/png', jpg: JPEG, jpeg: JPEG, gif: 'image/gif', tiff: 'image/tiff', svg: 'image/svg+xml', } } function parseExtension(url) { var match = /\.([^\.\/]*?)$/g.exec(url) if (match) return match[1] else return '' } function mimeType(url) { var extension = parseExtension(url).toLowerCase() return mimes()[extension] || '' } function isDataUrl(url) { return url.search(/^(data:)/) !== -1 } function toBlob(canvas) { return new Promise(function (resolve) { var binaryString = window.atob(canvas.toDataURL().split(',')[1]) var length = binaryString.length var binaryArray = new Uint8Array(length) for (var i = 0; i < length; i++) binaryArray[i] = binaryString.charCodeAt(i) resolve( new Blob([binaryArray], { type: 'image/png', }) ) }) } function canvasToBlob(canvas) { if (canvas.toBlob) return new Promise(function (resolve) { canvas.toBlob(resolve) }) return toBlob(canvas) } function resolveUrl(url, baseUrl) { var doc = document.implementation.createHTMLDocument() var base = doc.createElement('base') doc.head.appendChild(base) var a = doc.createElement('a') doc.body.appendChild(a) base.href = baseUrl a.href = url return a.href } function uid() { var index = 0 return function () { return 'u' + fourRandomChars() + index++ function fourRandomChars() { /* see http://stackoverflow.com/a/6248722/2519373 */ return ('0000' + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4) } } } function makeImage(uri) { return new Promise(function (resolve, reject) { var image = new Image() image.onload = function () { resolve(image) } image.onerror = reject image.src = uri }) } function getAndEncode(url) { var TIMEOUT = 30000 if (domtoimage.impl.options.cacheBust) { // Cache bypass so we dont have CORS issues with cached images // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache url += (/\?/.test(url) ? '&' : '?') + new Date().getTime() } return new Promise(function (resolve) { var request = new XMLHttpRequest() request.onreadystatechange = done request.ontimeout = timeout request.responseType = 'blob' request.timeout = TIMEOUT request.open('GET', url, true) request.send() var placeholder if (domtoimage.impl.options.imagePlaceholder) { var split = domtoimage.impl.options.imagePlaceholder.split(/,/) if (split && split[1]) { placeholder = split[1] } } function done() { if (request.readyState !== 4) return if (request.status !== 200) { if (placeholder) { resolve(placeholder) } else { fail('cannot fetch resource: ' + url + ', status: ' + request.status) } return } var encoder = new FileReader() encoder.onloadend = function () { var content = encoder.result.split(/,/)[1] resolve(content) } encoder.readAsDataURL(request.response) } function timeout() { if (placeholder) { resolve(placeholder) } else { fail('timeout of ' + TIMEOUT + 'ms occurred while fetching resource: ' + url) } } function fail(message) { console.error(message) resolve('') } }) } function dataAsUrl(content, type) { return 'data:' + type + ';base64,' + content } function escape(string) { return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1') } function delay(ms) { return function (arg) { return new Promise(function (resolve) { setTimeout(function () { resolve(arg) }, ms) }) } } function asArray(arrayLike) { var array = [] var length = arrayLike.length for (var i = 0; i < length; i++) array.push(arrayLike[i]) return array } function escapeXhtml(string, escapePercentSign) { if (escapePercentSign) { string = string.replace(/%/g, '%25') } return string.replace(/#/g, '%23').replace(/\n/g, '%0A') } function width(node) { var leftBorder = px(node, 'border-left-width') var rightBorder = px(node, 'border-right-width') return node.scrollWidth + leftBorder + rightBorder } function height(node) { var topBorder = px(node, 'border-top-width') var bottomBorder = px(node, 'border-bottom-width') return node.scrollHeight + topBorder + bottomBorder } function px(node, styleProperty) { var value = window.getComputedStyle(node).getPropertyValue(styleProperty) return parseFloat(value.replace('px', '')) } } function newInliner() { var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g return { inlineAll: inlineAll, shouldProcess: shouldProcess, impl: { readUrls: readUrls, inline: inline, }, } function shouldProcess(string) { return string.search(URL_REGEX) !== -1 } function readUrls(string) { var result = [] var match while ((match = URL_REGEX.exec(string)) !== null) { result.push(match[1]) } return result.filter(function (url) { return !util.isDataUrl(url) }) } function inline(string, url, baseUrl, get) { return Promise.resolve(url) .then(function (url) { return baseUrl ? util.resolveUrl(url, baseUrl) : url }) .then(get || util.getAndEncode) .then(function (data) { return util.dataAsUrl(data, util.mimeType(url)) }) .then(function (dataUrl) { return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3') }) function urlAsRegex(url) { return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g') } } function inlineAll(string, baseUrl, get) { if (nothingToInline()) return Promise.resolve(string) return Promise.resolve(string) .then(readUrls) .then(function (urls) { var done = Promise.resolve(string) urls.forEach(function (url) { done = done.then(function (string) { return inline(string, url, baseUrl, get) }) }) return done }) function nothingToInline() { return !shouldProcess(string) } } } function newFontFaces() { return { resolveAll: resolveAll, impl: { readAll: readAll, }, } function resolveAll() { return readAll() .then(function (webFonts) { return Promise.all( webFonts.map(function (webFont) { return webFont.resolve() }) ) }) .then(function (cssStrings) { return cssStrings.join('\n') }) } function readAll() { return Promise.resolve(util.asArray(document.styleSheets)) .then(getCssRules) .then(selectWebFontRules) .then(function (rules) { return rules.map(newWebFont) }) function selectWebFontRules(cssRules) { return cssRules .filter(function (rule) { return rule.type === CSSRule.FONT_FACE_RULE }) .filter(function (rule) { return inliner.shouldProcess(rule.style.getPropertyValue('src')) }) } function getCssRules(styleSheets) { var cssRules = [] styleSheets.forEach(function (sheet) { try { util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules)) } catch (e) { console.log('Error while reading CSS rules from ' + sheet.href, e.toString()) } }) return cssRules } function newWebFont(webFontRule) { return { resolve: function resolve() { var baseUrl = (webFontRule.parentStyleSheet || {}).href return inliner.inlineAll(webFontRule.cssText, baseUrl) }, src: function () { return webFontRule.style.getPropertyValue('src') }, } } } } function newImages() { return { inlineAll: inlineAll, impl: { newImage: newImage, }, } function newImage(element) { return { inline: inline, } function inline(get) { if (util.isDataUrl(element.src)) return Promise.resolve() return Promise.resolve(element.src) .then(get || util.getAndEncode) .then(function (data) { return util.dataAsUrl(data, util.mimeType(element.src)) }) .then(function (dataUrl) { return new Promise(function (resolve, reject) { element.onload = resolve element.onerror = reject element.src = dataUrl }) }) } } function inlineAll(node) { if (!(node instanceof Element)) return Promise.resolve(node) return inlineBackground(node).then(function () { if (node instanceof HTMLImageElement) return newImage(node).inline() else return Promise.all( util.asArray(node.childNodes).map(function (child) { return inlineAll(child) }) ) }) function inlineBackground(node) { var background = node.style.getPropertyValue('background') if (!background) return Promise.resolve(node) return inliner .inlineAll(background) .then(function (inlined) { node.style.setProperty( 'background', inlined, node.style.getPropertyPriority('background') ) }) .then(function () { return node }) } } } })(this) ================================================ FILE: lib/highlight-languages.js ================================================ import { LANGUAGES } from './constants' export default LANGUAGES.filter(l => l.highlight) .map(l => l.short || l.mode) .map(lang => [lang, require(`highlight.js/lib/languages/${lang}`)]) ================================================ FILE: lib/routing.js ================================================ import Morph from 'morphmorph' import url from 'url' import { escapeHtml } from './util' const URL_LIMIT = 4e3 const mapper = new Morph({ types: { bool: v => { if (v == null) return undefined if (v === 'false') return false return Boolean(v) }, int: v => { const integer = parseInt(v) if (isNaN(integer)) return undefined return integer }, intArray: v => { if (v == null) return undefined return v .split(',') .filter(i => !isNaN(i)) .map(i => parseInt(i)) }, parse: v => { try { const x = JSON.parse(v) return x } catch (e) { return v } }, decode: v => { if (v == null) return undefined try { return decodeURIComponent(v) } catch (e) { return v } }, encode: v => { if (v == null) return undefined try { const encoded = encodeURIComponent(v) if (encoded.length > URL_LIMIT) { // soft prevent URL length limit errors https://github.com/carbon-app/carbon/issues/829 return encodeURIComponent(v.slice(0, URL_LIMIT / 2)) } return encoded } catch (e) { return v } }, }, }) const readMappings = [ { field: 'bg:backgroundColor' }, { field: 't:theme' }, { field: 'wt:windowTheme' }, { field: 'l:language' }, { field: 'width' }, { field: 'ds:dropShadow', type: 'bool' }, { field: 'dsyoff:dropShadowOffsetY' }, { field: 'dsblur:dropShadowBlurRadius' }, { field: 'wc:windowControls', type: 'bool' }, { field: 'wa:widthAdjustment', type: 'bool' }, { field: 'pv:paddingVertical' }, { field: 'ph:paddingHorizontal' }, { field: 'ln:lineNumbers', type: 'bool' }, { field: 'fl:firstLineNumber', type: 'int' }, { field: 'fm:fontFamily' }, { field: 'fs:fontSize' }, { field: 'lh:lineHeight' }, { field: 'si:squaredImage', type: 'bool' }, { field: 'es:exportSize' }, { field: 'wm:watermark', type: 'bool' }, { field: 'sl:selectedLines', type: 'intArray' }, { field: 'copy', type: 'bool' }, { field: 'readonly', type: 'bool' }, { field: 'id' }, { field: 'highlights', type: 'parse' }, { field: 'code', type: 'decode' }, { field: 'tb:titleBar', type: 'decode' }, ] const writeMappings = [ { field: 'backgroundColor:bg' }, { field: 'theme:t' }, { field: 'windowTheme:wt' }, { field: 'language:l' }, { field: 'width' }, { field: 'dropShadow:ds', type: 'bool' }, { field: 'dropShadowOffsetY:dsyoff' }, { field: 'dropShadowBlurRadius:dsblur' }, { field: 'windowControls:wc', type: 'bool' }, { field: 'widthAdjustment:wa', type: 'bool' }, { field: 'paddingVertical:pv' }, { field: 'paddingHorizontal:ph' }, { field: 'lineNumbers:ln', type: 'bool' }, { field: 'firstLineNumber:fl', type: 'int' }, { field: 'fontFamily:fm' }, { field: 'fontSize:fs' }, { field: 'lineHeight:lh' }, { field: 'squaredImage:si', type: 'bool' }, { field: 'exportSize:es' }, { field: 'watermark:wm', type: 'bool' }, { field: 'code', type: 'encode' }, { field: 'titleBar:tb', type: 'encode' }, ] export const serializeState = state => { const stateString = encodeURIComponent(JSON.stringify(state)) return encodeURIComponent( typeof window !== 'undefined' ? btoa(stateString) : Buffer.from(stateString).toString('base64') ) } export const deserializeState = serializedState => { let stateString if (typeof window !== 'undefined') { stateString = atob(serializedState) } else { stateString = Buffer.from(serializedState, 'base64').toString() } return JSON.parse(decodeURIComponent(stateString)) } const getQueryStringObject = query => { if (query.state) { return deserializeState(query.state) } const state = mapper.map(readMappings, query) Object.keys(state).forEach(key => { if (state[key] === '') state[key] = undefined }) return state } function getQueryStringState(query) { const queryParams = getQueryStringObject(query) return Object.keys(queryParams).length ? queryParams : {} } function fixAsPathEncoding(asPath) { try { return url.parse(asPath, true) } catch (e) { return url.parse(encodeURI(asPath), true) } } export const getRouteState = router => { const { asPath = '' } = router const { query, pathname } = fixAsPathEncoding(asPath) const queryState = getQueryStringState(query) const path = escapeHtml( pathname // remove trailing slash .replace(/\/$/, '') .split('/') .pop() ) const parameter = path.length >= 19 && path.indexOf('.') < 0 ? path : null return { parameter, queryState, } } export const updateRouteState = (router, state) => { const mappedState = mapper.map(writeMappings, state) // calls `encodeURIComponent` on each key internally // const query = qs.stringify(mappedState) router.replace( { pathname: router.pathname, }, { pathname: router.pathname, query: mappedState, }, { shallow: true, scroll: false } ) } ================================================ FILE: lib/util.js ================================================ import morph from 'morphmorph' import omitBy from 'lodash.omitby' import { htmlUnescape } from 'escape-goat' const SETTINGS_KEY = 'CARBON_STATE' const PRESETS_KEY = 'CARBON_PRESETS' const THEMES_KEY = 'CARBON_THEMES' const createAssigner = key => { const assign = morph.assign(key) return v => assign(localStorage, JSON.stringify(v)) } const map = fn => obj => obj.map(fn) export const omit = keys => object => omitBy(object, (_, k) => keys.indexOf(k) > -1) export const saveSettings = morph.compose( createAssigner(SETTINGS_KEY), omit([ 'code', 'backgroundImage', 'backgroundImageSelection', 'themes', 'highlights', 'fontUrl', 'selectedLines', 'name', ]) ) export const savePresets = morph.compose( createAssigner(PRESETS_KEY), map(omit(['backgroundImageSelection'])) ) export const saveThemes = createAssigner(THEMES_KEY) const parse = v => { try { return JSON.parse(v) } catch (e) { // pass } } export const toggle = stateField => state => ({ [stateField]: !state[stateField] }) // https://gist.github.com/alexgibson/1704515 export const escapeHtml = s => { if (typeof s === 'string') { return s.replace(//g, '>').replace(/\//g, '/') } } export const unescapeHtml = s => { if (typeof s === 'string') { return htmlUnescape(s).replace(///g, '/') } } export const getSettings = morph.compose(parse, escapeHtml, morph.get(SETTINGS_KEY)) export const getPresets = morph.compose(parse, morph.get(PRESETS_KEY)) export const getThemes = morph.compose(parse, morph.get(THEMES_KEY)) export const clearSettings = () => localStorage.removeItem(SETTINGS_KEY) export const fileToDataURL = blob => new Promise(res => { const reader = new FileReader() reader.onload = e => res(e.target.result) reader.readAsDataURL(blob) }) export const fileToJSON = blob => new Promise(res => { const reader = new FileReader() reader.onload = e => res(parse(e.target.result)) reader.readAsText(blob) }) export const formatCode = async code => { const prettier = await import('prettier/standalone') const babylonParser = await import('prettier/parser-babel') return prettier.format(code, { parser: 'babel', plugins: [babylonParser], semi: false, singleQuote: true, }) } export const stringifyColor = obj => `rgba(${obj.rgb.r},${obj.rgb.g},${obj.rgb.b},${obj.rgb.a})` export const generateId = () => Math.random().toString(36).slice(2) ================================================ FILE: next.config.js ================================================ const bundleAnalyzer = require('@next/bundle-analyzer') const withOffline = require('next-pwa') const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' }) module.exports = withBundleAnalyzer( withOffline({ pwa: { disable: process.env.NODE_ENV !== 'production', dest: 'public', register: false, skipWaiting: false, }, webpack: (config, options) => { config.module.rules.push({ test: /\.js$/, include: /node_modules\/graphql-language-service-parser/, use: [options.defaultLoaders.babel], }) config.plugins.push( new options.webpack.IgnorePlugin({ resourceRegExp: /\.html$/, contextRegExp: /node_modules/, }) ) config.plugins.push( new options.webpack.IgnorePlugin({ resourceRegExp: /\.css$/, contextRegExp: /node_modules\/codemirror\/mode/, }) ) return config }, headers() { return [ { source: '/api/oembed', headers: [ { key: 'Access-Control-Allow-Origin', value: '*' }, { key: 'Access-Control-Allow-Headers', value: '*' }, ], }, { source: '/', headers: [{ key: 'X-Frame-Options', value: 'SAMEORIGIN' }], }, { source: '/(.*)', headers: [ { key: 'X-XSS-Protection', value: '1; mode=block' }, { key: 'X-Content-Type-Options', value: 'nosniff' }, { key: 'Referrer-Policy', value: 'no-referrer-when-downgrade' }, { key: 'Feature-Policy', value: "geolocation 'self'; microphone 'self'; camera 'self'", }, ], }, ] }, rewrites() { return [{ source: '/api/image', destination: '/api/image/index' }] }, redirects() { return [ { source: '/privacy', destination: 'https://carbon-app.notion.site/PRIVACY-POLICY-65f08f57a8a14f91931d778f9a471a7d', permanent: false, }, { source: '/terms', destination: 'https://carbon-app.notion.site/TERMS-OF-USE-d159661077fe4ef2974e6108b36aeece', permanent: false, }, { source: '/offsets', destination: 'https://www.wren.co/join/carbon?utm_campaign=share&utm_medium=profile_referral_link', permanent: false, }, ] }, }) ) ================================================ FILE: package.json ================================================ { "name": "carbon", "description": "Create and share beautiful images of your source code", "version": "4.9.10", "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/carbon-app/carbon.git" }, "bugs": { "url": "https://github.com/carbon-app/carbon/issues" }, "homepage": "https://carbon.now.sh", "engines": { "node": ">=12" }, "scripts": { "dev": "next", "build": "next build", "start": "next start", "test:e2e": "npm run cy:run --", "deploy": "vercel -S carbon-app", "prettier": "prettier --config .prettierrc --write {.,components,lib,pages}/*.js {components,lib,pages}/**/*.js", "lint": "next lint --dir .", "contrib:add": "all-contributors add", "contrib:build": "all-contributors generate", "cy:run": "cypress run --config-file cypress/config.json", "cy:open": "cypress open --config-file cypress/config.json" }, "dependencies": { "@next/bundle-analyzer": "latest", "@reach/visually-hidden": "^0.17.0", "actionsack": "^0.0.15", "axios": "^0.28.0", "chrome-aws-lambda": "^8.0.2", "cm-show-invisibles": "^3.1.0", "codemirror": "5.65.5", "codemirror-graphql": "^1.3.0", "codemirror-mode-elixir": "^1.1.2", "codemirror-solidity": "^0.2.3", "date-fns": "^2.28.0", "downshift": "^6.1.7", "dropperx": "^1.0.1", "eitherx": "^1.0.3", "email-validator": "^2.0.4", "escape-goat": "^4.0.0", "firebase": "^8.9.1", "graphql": "^16.8.1", "highlight.js": "^10.7.2", "lodash.debounce": "^4.0.8", "lodash.omitby": "^4.6.0", "match-sorter": "^6.3.1", "morphmorph": "^0.1.3", "ms": "^2.1.3", "next": "^12.1.6", "next-pwa": "^5.5.2", "prettier": "^2.6.2", "puppeteer-core": "^9.0.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", "tohash": "^1.0.2" }, "devDependencies": { "@applitools/eyes-cypress": "^3.25.7", "all-contributors-cli": "^6.20.0", "cypress": "^9.6.1", "eslint": "^8.15.0", "eslint-config-next": "^12.1.6", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.5.0", "husky": "^4.3.8", "lint-staged": "^11.2.3", "now-release": "^0.0.2", "vercel": "^24.2.3", "wait-on": "^6.0.1" }, "resolutions": { "@grpc/grpc-js": "^1.6.7", "acorn": "^8.7.1", "glob-parent": "^6.0.2", "kind-of": "^6.0.3", "lodash": "^4.17.2", "serialize-javascript": "^6.0.0", "sharp": "^0.30.4" }, "lint-staged": { "*.js": [ "npm run lint", "prettier --config .prettierrc --write" ], ".all-contributorsrc": [ "npm run contrib:build" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } } } ================================================ FILE: pages/[id].js ================================================ import React from 'react' import Router from 'next/router' import IndexPage from './index' import api from '../lib/api' export async function getServerSideProps({ req, res, query }) { const { id: path, filename } = query const parameter = path.length >= 19 && path.indexOf('.') < 0 ? path : null let snippet if (parameter) { const host = req ? req.headers.host : undefined snippet = await api.snippet.get(parameter, { host, filename }) if (snippet) { return { props: { snippet, host } } } // 404 Not found if (res) { res.writeHead(302, { Location: '/', }) res.end() } else { Router.push('/') } } return { props: {} } } export default React.memo(function IdPage(props) { return }) ================================================ FILE: pages/_document.js ================================================ import React from 'react' import Document, { Html, Head, Main, NextScript } from 'next/document' export default class Doc extends Document { render() { return (
    ) } } ================================================ FILE: pages/about.js ================================================ import React from 'react' import Page from '../components/Page' function Contributors() { const [contributors, setContributors] = React.useState([]) React.useEffect(() => { fetch('https://api.github.com/repos/carbon-app/carbon/contributors?per_page=100') .then(response => response.json()) .then(contributors => setContributors(contributors.filter(contributor => !contributor.login.endsWith('[bot]'))) ) }, []) return (
    {contributors.map(contributor => ( {contributor.login} ))}
    ) } export default function About() { return (

    What does this do?

    Carbon lets you create and share beautiful images of your source code

    You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we thought there was room for improvement in the aesthetic department. So what are you waiting for? Go try it out and impress all your developer and designer friends.{' '} 🎨

    Who uses it?

    Carbon is used by thousands of developers daily, including experts at: Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft

    How do I use it?

    Import

    There are a few different ways to import code into Carbon:

    • Drop a file into the editor
    • Append a GitHub gist id to the url ( example )
    • Paste your code directly

    Customization

    Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color/image, window theme, or padding.

    You can even drop an image file onto the editor to set the background to that image. Give it a try!

    Export/Sharing

    After you've customized your image you can Tweet a link to the image, or save it directly.

    If you use the 'Tweet' button, Carbon will automatically make your image accessible. However, if you want to manually tweet your Carbon image, please check out ( how to make your Twitter images accessible ).

    If you include a Carbon image in a post, the source code will be invisible to assistive technology — it will not be possible to enlarge or copy it, etc. Please, think about adding another element with the source code as text, like ( an HTML Details Element ) below the image.

    Keyboard Shortcuts

    Open settings menu ⌘ /
    Export as PNG ⇧ ⌘ E
    Export as SVG ⇧ ⌘ S
    Save snippet ⌥ S
    Copy image to clipboard ⇧ ⌘ C
    Reset settings ⇧ ⌘ \

    I want to make this better.

    Contributors welcome!


    ) } ================================================ FILE: pages/account.js ================================================ // Theirs import React from 'react' import dynamic from 'next/dynamic' // Ours import Button from '../components/Button' import Page from '../components/Page' import MenuButton from '../components/MenuButton' import { useAuth } from '../components/AuthContext' import { loginGitHub, logout } from '../lib/client' import { COLORS } from '../lib/constants' const Billing = dynamic(() => import('../components/Billing'), { loading: () =>
    , }) function logoutThunk() { return logout } const soon = ⓘ function Plan({ selectBilling }) { const user = useAuth() function handleSelectFree() { if (!user) { loginGitHub() } } function handleSelectUpgrade() { if (!user) { return loginGitHub() } selectBilling() } return (

    Free

    Diamond
    PNG/SVG Exports ✔ ✔
    Full visual editor ✔ ✔
    Custom backgrounds ✔ ✔
    GitHub Gist support ✔ ✔
    Saved snippets 1000 ∞
    Embed saved snippets ✔ ✔
    API Access {soon} ✔
    Saved custom themes/presets {soon} ✔
    Twitter card unfurls {soon} ✔
    FREE FOREVER $5.00 / month
    ) } function Settings() { const [selected, select] = React.useState('Plan') const user = useAuth() function selectMenu(name) { return () => select(name) } return (
    {/* */} {user && }
    {selected === 'Plan' && } {selected === 'Billing' && }
    {user && {user.displayName}}
    ) } function SettingsPage() { return ( ) } export default SettingsPage ================================================ FILE: pages/api/image/[id].js ================================================ /* global domtoimage */ import qs from 'querystring' import chrome from 'chrome-aws-lambda' import puppeteer from 'puppeteer-core' // TODO expose local version of dom-to-image const DOM_TO_IMAGE_URL = 'https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js' const NOTO_COLOR_EMOJI_URL = 'https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf' export const config = { api: { bodyParser: { sizeLimit: '6mb', }, }, } export default async function id(req, res) { // TODO proper auth if (req.method === 'GET') { if ( req.referer || (req.headers['user-agent'].indexOf('Twitterbot') < 0 && // Slack does not honor robots.txt: https://api.slack.com/robots req.headers['user-agent'].indexOf('Slackbot') < 0 && req.headers['user-agent'].indexOf('Slack-ImgProxy') < 0) ) { return res.status(401).send('Unauthorized') } } else { if (!req.headers.origin && !req.headers.authorization) { return res.status(401).send('Unauthorized') } } try { await chrome.font(NOTO_COLOR_EMOJI_URL) } catch (e) { console.error(e) } const browser = await puppeteer.launch({ args: [...chrome.args, '--hide-scrollbars'], defaultViewport: chrome.defaultViewport, executablePath: await chrome.executablePath, headless: chrome.headless, ignoreHTTPSErrors: true, }) try { const { state, id: _id, ...params } = req.method === 'GET' ? req.query : req.body const id = _id && _id !== 'index' ? _id : undefined const page = await browser.newPage() const queryString = state ? `state=${state}` : qs.stringify(params) await page.goto(`https://carbon.now.sh/${id ? id : `?${queryString}`}`) await page.addScriptTag({ url: DOM_TO_IMAGE_URL }) await page.waitForSelector('.export-container', { visible: true, timeout: 9500 }) const targetElement = await page.$('.export-container') const dataUrl = await page.evaluate((target = document) => { const query = new URLSearchParams(document.location.search) const EXPORT_SIZES_HASH = { '1x': '1', '2x': '2', '4x': '4', } const exportSize = EXPORT_SIZES_HASH[query.get('es')] || '2' target.querySelectorAll('span[role="presentation"]').forEach(node => { if (node.innerText && node.innerText.match(/%[A-Fa-f0-9]{2}/)) { node.innerText.match(/%[A-Fa-f0-9]{2}/g).forEach(t => { node.innerHTML = node.innerHTML.replace(t, encodeURIComponent(t)) }) } }) const width = target.offsetWidth * exportSize const height = query.get('si') === 'true' || query.get('si') === true ? target.offsetWidth * exportSize : target.offsetHeight * exportSize const config = { style: { transform: `scale(${exportSize})`, 'transform-origin': 'center', background: query.get('si') ? query.get('bg') : 'none', }, filter: n => { if (n.className) { return String(n.className).indexOf('eliminateOnRender') < 0 } return true }, width, height, } return domtoimage.toPng(target, config) }, targetElement) if (req.method === 'GET') { res.setHeader('Content-Type', 'image/png') const data = new Buffer(dataUrl.split(',')[1], 'base64') return res.status(200).send(data) } return res.status(200).send(dataUrl) } catch (e) { // eslint-disable-next-line console.error(e) return res.status(500).end() } finally { await browser.close() } } ================================================ FILE: pages/api/oembed.js ================================================ /* * See oEmbed standard here: https://oembed.com/ */ const url = require('url') const toIFrame = (url, width, height) => ` ` module.exports = (req, res) => { let embedUrl = req.query.url try { embedUrl = decodeURIComponent(embedUrl) } catch (e) { // eslint-disable-next-line console.log(e) /* URL is already decoded */ } try { const { query: queryString, pathname } = url.parse(embedUrl) const snippetID = pathname.split('/').pop() const width = Math.min(Number(req.query.maxwidth) || Infinity, 1024) const height = Math.min(Number(req.query.maxheight) || Infinity, 480) const obj = { version: '1.0', type: 'rich', provider_name: 'Carbon', width, height, html: toIFrame( `${snippetID && snippetID !== 'undefined' ? `/${snippetID}` : ''}?${ queryString ? queryString : '' }`, width, height ), } return res.status(200).json(obj) } catch (e) { // eslint-disable-next-line console.error(e) return res.status(500).send(e.message) } } ================================================ FILE: pages/embed/[id].js ================================================ import React from 'react' import Router from 'next/router' import EmbedPage from './index' import api from '../../lib/api' export async function getServerSideProps({ req, res, query }) { const { id: path, filename } = query const parameter = path.length >= 19 && path.indexOf('.') < 0 ? path : null let snippet if (parameter) { const host = req ? req.headers.host : undefined snippet = await api.snippet.get(parameter, { host, filename }) if (snippet /* && snippet.gist_id */) { return { props: { snippet } } } // 404 Not found if (res) { res.writeHead(302, { Location: '/embed', }) res.end() } else { Router.push('/embed') } } return { props: {} } } export default React.memo(function EmbedIdPage(props) { return }) ================================================ FILE: pages/embed/index.js ================================================ // Theirs import React from 'react' import Head from 'next/head' import { withRouter } from 'next/router' // Ours import ApiContext from '../../components/ApiContext' import { StylesheetLink, CodeMirrorLink, MetaTags, HIGHLIGHTS_ONLY } from '../../components/Meta' import Font from '../../components/style/Font' import Carbon from '../../components/Carbon' import GlobalHighlights from '../../components/Themes/GlobalHighlights' import { DEFAULT_CODE, DEFAULT_SETTINGS, THEMES_HASH } from '../../lib/constants' import { getRouteState } from '../../lib/routing' const Page = props => ( Carbon Embeds {props.children} {HIGHLIGHTS_ONLY.includes(props.theme) && ( )} ) class Embed extends React.Component { static contextType = ApiContext state = { ...DEFAULT_SETTINGS, code: DEFAULT_CODE, mounted: false, readOnly: true, } snippet = {} async componentDidMount() { const { queryState } = getRouteState(this.props.router) this.setState( { ...this.props.snippet, ...queryState, copyable: queryState.copy !== false, readOnly: queryState.readonly !== false, mounted: true, }, this.postMessage ) } ref = React.createRef() postMessage = () => { setTimeout( () => window.top.postMessage( JSON.stringify({ // Used by embed provider src: window.location.toString(), context: 'iframe.resize', height: this.ref.current.offsetHeight, }), '*' ), 0 ) } updateCode = code => { this.setState({ code }, this.postMessage) window.top.postMessage( { id: this.state.id ? `carbon:${this.state.id}` : 'carbon', code, }, '*' ) } render() { return ( ) } } export default withRouter(Embed) ================================================ FILE: pages/index.js ================================================ // Theirs import React from 'react' import { withRouter } from 'next/router' import Either from 'eitherx' // Ours import EditorContainer from '../components/EditorContainer' import Page from '../components/Page' import { MetaLinks } from '../components/Meta' class Index extends React.Component { componentDidMount() { if (window.workbox && window.workbox.register) { window.workbox.register() } } componentWillUnmount() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister() }) } } shouldComponentUpdate = () => false render() { return (

    An unexpected error has occurred. Please{' '} file an issue here .

    ) } } export default withRouter(Index) ================================================ FILE: pages/snippets.js ================================================ // Theirs import React from 'react' import Link from 'next/link' import Router from 'next/router' import formatDistanceToNow from 'date-fns/formatDistanceToNow' import { useAsyncCallback } from 'actionsack' import Button from '../components/Button' import LoginButton from '../components/LoginButton' import ConfirmButton from '../components/ConfirmButton' import { MetaLinks } from '../components/Meta' import Carbon from '../components/Carbon' import Page from '../components/Page' import { useAuth } from '../components/AuthContext' import { useAPI } from '../components/ApiContext' import { COLORS, DEFAULT_SETTINGS } from '../lib/constants' function correctTimestamp(n) { if (n < 9e12) { return n * 1000 } return n } function Snippet(props) { const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false, } return (
    {props.code}
    {props.name || props.title || props.id}
    Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
    Delete
    ) } function ActionButton(props) { return (