telescopejs / telescope

🔭 The service ( from Client or Server ) works for render view ( markdown / code / image... ) from fetching URL.

Telescope 🔭

What is telescope

Telescope is the service ( from client or server ) works for render view ( md / code / image... ) via fetching URL.
It's awesome that we can see any file on the internet. And telescope provides three ways (html/image/pdf) to display the view.
So you can write the markup as follows.

<!--https://telescopejs.github.io/ is the client side's service without any dynamic server-->
<iframe src="https://telescopejs.github.io/?q=picidaejs/picidaejs" frameborder="0" width="100%" height="400px"></iframe>

Features

• ✈ Supports client and server side.
• 🍻 Multiply styles.
• 😊 The service server side supports output the view via image or pdf.
• 🍫 The code supports specified line range.
• 👍 More features is waiting for you to discover...

Why needs telescope

Hackernoon and Medium has the similar view via rendering gist snippet. We can use telescope service to preview or generate the image / pdf easily!

Installation

git clone https://github.com/telescopejs/telescope.git
cd telescope
# If you are in china, should set PUPPETEER_DOWNLOAD_HOST to speed the installation of puppeteer. 
PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors npm install
# server side, default port 8002
npm start
# or client side, default port 9999
npm run client
# build the assert of client side on `public/`
npm run client:build

Meanwhile, telescope requires chrome libraries.
You should ensure the dependencies of chrome that you had installed, because I use the headless Chrome browser puppeteer to generate snapshot and pdf.

• More information Here

Client Side

Open http://localhost:9999 after setup the service on port 9999.

• The accepted query string table (server side accepted too)

name	type	description
q	string	the fetching url, e.g. picidaejs/picidaejs/master/src/index.js picidaejs/picidaejs
style	string	the view style, please see https://telescopejs.github.io/?debug=true
hlStyle	string	the code's highlight style, please see https://telescopejs.github.io/?debug=true
range	number|[start, end]	the code's range, e.g. ?range=10 ?range=[10] ?range=[10, 20] ?range=[-20, -15]

And specially, debug=true is accepted on client side for debug.

Server Side

Temporary outside service http://23.106.151.229:8002/

• Please try the path name below

/telescopejs/telescope
/img/telescopejs/telescope
/img/telescopejs/telescope/master/package.json?hlStyle=school-book
/pdf/telescopejs/telescope
/pdf/telescopejs/telescope/master/package.json

Customized

If you want to customize yourself own telescope, Please write your plugin or style.

License

MIT imcuttle