Sign inSign up

jonnitto/shiki-server

By jonnitto

•Updated 2 months ago

Standalone shiki server, listening on port 8090/tcp

Image
Languages & frameworks
Integration & delivery
Developer tools
1

5.3K

jonnitto/shiki-server repository overview

⁠Shiki docker microservice / server

Standalone shiki⁠ server, listening on port 8090/tcp. Usefull if you want to use the awesome code highlighting from shiki⁠, but without to include the javascript in the frontend. It adds also support for the language Neos Fusion⁠. (The key for this language is neosfusion)

⁠Overview

This image spools up a simple shiki server instance, listening to port 8090/tcp per default.

Starting the image is as easy as running a test instance through docker

docker run -it --rm jonnitto/shiki-server

or docker-compose with the following example:

services:
  shiki:
    image: jonnitto/shiki-server
    # environment:
    # to change the port:
    #   - PORT=8081
    # to change the default theme
    #   - DEFAULT_THEME=github-dark
    # to change the default language
    #   - DEFAULT_LANGUAGE=javascript
    # for development, uncomment the following lines:
    #   - CORS=*

⁠Defaults

The production defaults, without any override, default to:

CORS ""
PORT 8090
HEALTHCHECK "true"
CHARSET "utf8"
DEFAULT_RESPONSE_CONTENT_TYPE "text/html; charset=utf-8"
DEFAULT_THEME "vitesse-dark"
DEFAULT_LANGUAGE "javascript"

⁠Development

For development environments I would suggest to switch it to

CORS "*"

⁠API

KeyValue descriptionRequired
codeThe markup✓
langThe language of the markup✓
themeThe theme for the code highlighter✓
themeDarkDark mode theme
cssClassAdd a CSS class to the <pre> element

An api call should look like this:

const body = {
  code: '<button type="button">Hello World</button>',
  lang: "html",
  theme: "github-light",
  themeDark: "github-dark",
  cssClass: "my-custom-class",
};

fetch("http://YOUR_ENDPOINT:8090/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
  body: JSON.stringify(body),
});

or with PHP and Guzzle

use GuzzleHttp\Pool;
use GuzzleHttp\Client;
use GuzzleHttp\Psr7\Request;

$client = new Client();

$request = new Request(
  "POST",
  "http://YOUR_ENDPOINT:8090/",
  [
      "Content-Type" => "application/json; charset=utf-8"
  ],
  "{\"code\":\"<button type=\\\"button\\\">Hello World</button>\",\"lang\":\"html\",\"theme\":\"github-light\",\"themeDark\":\"github-dark\",\"cssClass\":\"my-custom-class\"}");

$response = $client->send($request);

But you can use any language you want to create the request

⁠Returned object

The server response with an JSON object:

{
  "html": "The Markup as html",
  "colors": {
    "default": {
      "fg": "foreground color of the theme",
      "bg": "background color of the theme"
    },
    "dark": {
      "fg": "foreground color of the dark theme (if set, otherwise dark will be null)",
      "bg": "background color of the dark theme (if set, otherwise dark will be null)"
    }
  },
  "code": "The original markup passed"
}

⁠Useage togehter with ddev

I you use ddev⁠ for development like me, you can add this service like that:

Create a file called docker-compose.shiki.yaml in you .ddev folder:

services:
  shiki:
    container_name: ddev-${DDEV_SITENAME}-shiki
    hostname: ${DDEV_SITENAME}-shiki
    image: jonnitto/shiki-server
    labels:
      com.ddev.site-name: ${DDEV_SITENAME}
      com.ddev.approot: $DDEV_APPROOT
    environment:
      - CORS=*
      - HEALTHCHECK=false

Add a enviroment variable in you config.yaml:

web_environment:
  - SHIKI_API_ENDPOINT=ddev-${DDEV_SITENAME}-shiki:8090

Now you can use the enviroment variable SHIKI_API_ENDPOINT as your endpoint.

Tag summary

Content type

Image

Digest

sha256:ba5c7db54…

Size

69.2 MB

Last updated

2 months ago

docker pull jonnitto/shiki-server