A Docsify plugin to render modern animated terminal blocks from markdown.
https://docs.jsx6.com (deployed from the latest code on the main branch)
$ php -v
PHP 7.3.23 (cli) (built: Apr 20 2022 15:59:45)
$ pip install fastapi
>> 100%
# Choose an option (y/n)
$ y
// This is a comment
Via CDN jsdelivr.com
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/css/termynal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/css/custom.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/js/termynal.js"></script>
<script src="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/js/custom.js"></script>Add the following configuration into window.$docsify:
window.$docsify = {
// ...
plugins: [
function (hook, vm) {
hook.beforeEach(content => beforeEach(content));
hook.doneEach(() => {
setupTermynal();
showRandomAnnouncement('announce-left', 5000);
showRandomAnnouncement('announce-right', 10000);
});
}
]
};below is a complete usage example
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/css/custom.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/css/termynal.css"
/>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
// ...
plugins: [
function (hook, vm) {
hook.beforeEach(content => beforeEach(content));
hook.doneEach(() => {
setupTermynal();
showRandomAnnouncement('announce-left', 5000);
showRandomAnnouncement('announce-right', 10000);
});
}
]
};
</script>
<script src="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/js/termynal.js"></script>
<script src="https://cdn.jsdelivr.net/gh/sxin0/docsify-termynal@main/dist/js/custom.js"></script>
</body>
</html>When deploying with Nginx, you need to configure it properly to handle docsify's routing system. Here's a recommended configuration:
server {
listen 443 ssl http2;
server_name your-domain.com;
# SSL configuration
ssl_certificate /path/to/your/cert.pem;
ssl_certificate_key /path/to/your/key.pem;
root /path/to/your/docsify-termynal;
location / {
add_header Cache-Control no-store;
index index.html;
# Handle directory access
if (-d $request_filename) {
rewrite ^(.*)$ /index.html last;
}
# Handle all routes
try_files $uri $uri/ /index.html;
}
# Cache static assets
location ~ .*\.(js|css)?$ {
expires 1h;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
expires 30d;
}
# Deny access to hidden files
location ~ /\.(?!well-known) {
deny all;
}
}Key points to note:
- All directory access should be redirected to
index.html - Static assets should be cached appropriately
- Hidden files (except
.well-known) should be denied - SSL configuration is recommended for production use
Licensed under the MIT License.