Giter Site home page Giter Site logo

teknologi-umum / graphene Goto Github PK

View Code? Open in Web Editor NEW
27.0 2.0 10.0 15.31 MB

Lighter Carbon alternative made with Shiki

Home Page: https://graphene.teknologiumum.com

License: MIT License

HTML 4.91% Dockerfile 0.41% TypeScript 80.45% SCSS 14.23%
code-screenshot code-snippets carbon shiki

graphene's Introduction

logo.png


Usage

Please visit https://graphene.teknologiumum.com for Graphene Web UI and its documentation.

FAQ

How to contribute?

You can read CONTRIBUTING.md before making your PR.

Why Shiki?

Because it gives pretty much the same accurate highlighting as Visual Studio Code. Though it won't highlight it semantically since it still uses RegEx.

How it works

  • You send a request with stuff
  • Graphene does its magic
  • ???
  • Profit
ok sorry, click here for the real answer
  • You send a POST request with a JSON body containing valid options
  • It will highlight the code using Shiki
  • Then, it will render the result to svg using our custom svg renderer which is a heavily modified version of the original svg renderer that shiki has.
  • Apply border, upscale, and convert to the desired output format using sharpjs
  • Send it back to you

..what is up with the commit messages?

I don't even know. This was meant to be a toy project so I just put whatever that came to mind when writing the commit message, but now it became an actual thing.

Why do I prefer this over, say, carbon.now.sh?

Well, I made this because I want it to be used programatically, without having to open a browser and doing it myself, or having to scrape carbon.now.sh website using something like puppeteer.

Because it uses Shiki, the highlight produced is more accurate, it's identical to the one used in Visual Studio Code.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.