Klipse
Klipse là một plugin JavaScript dùng để nhúng các đoạn mã tương tác vào các bài viết công nghệ.
Về cơ bản, Klipse là một đoạn mã JavaScript nhỏ thực hiện việc đánh giá các đoạn mã trong trình duyệt và nó có thể được nhúng vào bất kỳ trang web nào.
Nếu bạn thích điều này, xin hãy xem xét việc quyên góp (số tiền nhỏ) tại Patreon.
Xem ví dụ tại https://blog.klipse.tech/
Plugin
Plugin klipse là một thẻ JavaScript (xem chi tiết tại below) biến đổi các đoạn mã tĩnh trên trang html thành các đoạn mã sống và tương tác:
. Sống : Mã được thực thi trong trình duyệt của bạn
. Tương tác : Bạn có thể sửa đổi mã và mã sẽ được đánh giá ngay khi bạn gõ
Việc đánh giá mã được thực hiện trong trình duyệt: không có máy chủ nào được liên quan!
Demo sống
Với plugin klipse, mã sẽ được đánh giá ngay khi bạn gõ…
Dưới đây là một live demo của việc nhúng klipse vào trang web.
| JavaScript | Ruby |
|---|---|
 |
 |
| PHP | Clojure |
| — | — |
 |
 |
Các ngôn ngữ được hỗ trợ
- JavaScript: việc đánh giá được thực hiện bằng hàm JavaScript
evalvà kết quả được làm đẹp với pretty-format - Clojure[Script]: việc đánh giá được thực hiện bằng Self-Hosted Clojurescript
- Ruby: việc đánh giá được thực hiện bằng Opal
- C++: việc đánh giá được thực hiện bằng JSCPP
- Python: việc đánh giá được thực hiện bằng Skulpt
- Python3: việc đánh giá được thực hiện bằng Pyodide
- Scheme: việc đánh giá được thực hiện bằng BiwasScheme
- Prolog: việc đánh giá được thực hiện bằng Tau Prolog
- Common Lisp: việc đánh giá được thực hiện bằng JSCL
- PHP: việc đánh giá được thực hiện bằng Uniter
- SQL: việc đánh giá được thực hiện bằng sql.js. Xem thêm tại SQL example
- Lua: việc đánh giá được thực hiện bằng wasm_lua
- Go: việc đánh giá được thực hiện bằng Yaegi
- BrainFuck
- JSX
- EcmaScript2017
- Google Charts: Xem tại Interactive Business Report with Google Charts.
Việc chỉnh sửa mã trong các đoạn tương tác được hỗ trợ bởi CodeMirror.
Làm thế nào nó hoạt động?
- JavaScript: A new way of blogging about JavaScript
- Ruby: A new way of blogging about ruby
- Clojure[Script]: How to klipsify a clojure[script] blog post
Tích hợp
Để tích hợp plugin klipse vào một blog, tài liệu thư viện hoặc bất kỳ trang web nào khác, bạn cần tuân theo 3 bước đơn giản.
Đảm bảo rằng bạn có <!DOCTYPE html> ở đầu tệp html của bạn và <meta charset="utf-8"> ngay sau thẻ <head> (Điều này cần thiết để hiển thị đúng các phần tử CodeMirror được sử dụng bởi Klipse.)
Thêm css và cấu hình tùy chỉnh nào đó ở trang (có thể ở thẻ <head> hoặc trong thẻ <body>) trước phần tử <script> của bước #3. Các khóa chọn là theo ngôn ngữ (xem bên dưới để biết danh sách các ngôn ngữ được hỗ trợ) và giá trị là bộ chọn CSS của các phần tử mà bạn muốn biến thành klipsify.
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
};
</script>
. Thêm thẻ JavaScript ở cuối thẻ body :
Đối với Clojure:
<script src="https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js"></script>
</body>
Đối với các ngôn ngữ khác:
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>
Dưới đây là một interactive guide của các đoạn klipse.
Nếu bạn muốn đặt thẻ JavaScript Klipse từ máy chủ riêng của bạn, xin xem Host Klipse Locally.
Nếu bạn muốn sử dụng phiên bản Klipse cũ hơn, xin xem Use Older Versions.
JavaScript
Dưới đây là full interactive guide của các đoạn JavaScript klipse.
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Đây là một jsfiddle with Klipse plugin for JavaScript. Và đây là những giải thích chi tiết về a JavaScript live code editor in a blog post.
Clojure và ClojureScript trên một trang web
Lưu ý: Đối với các đoạn mã tương tác Clojure, bạn phải sử dụng phiên bản không được tối giản của klipse vì hiện tại, self-host cljs không hỗ trợ biên dịch nâng cao!
Đây là full interactive guide của các đoạn mã clojure trên klipse.
Bạn có thể tương tác với DOM trong KLIPSE: đây là một tutorial.
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector: '.language-klipse'// css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js"></script>
Dự án ClojureScript
Nếu bạn muốn tích hợp Klipse vào một dự án Clojurescript, được khuyến nghị là tiêu thụ Klipse như một thư viện Clojurescript giống như bất kỳ thư viện Clojurescript nào khác, như ví dụ này 
.
Trong mã của bạn, bạn phải yêu cầu hai namespace và gọi một hàm:
(ns my.project
(:require [klipse.run.plugin.plugin] ;; this namespace initializes Klipse. We require it for its side effects
[klipse.plugin :as klipse-plugin]))
(klipse-plugin/init #js {:selector ".language-klipse"
:selector_reagent ".language-reagent"})
Đây là một ví dụ về tiny reagent demo project tích hợp Klipse như một thư viện Clojurescript.
Python
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_python_client: '.language-klipse-python', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Python3 (numpy, pandas)
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_pyodide: '.language-klipse-pyodide', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Ruby
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_ruby: '.language-klipse-eval-ruby', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Lua
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/lua.css">
<script>
window.klipse_settings = {
selector_lua: '.language-klipse-lua', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Go
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_golang: '.language-klipse-go, // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Scheme
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_scheme: '.language-klipse-eval-scheme', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
Prolog
Các đoạn mã Prolog được chia thành hai loại:
- Luật
- Câu truy vấn
Trong câu truy vấn, bạn phải bỏ qua các ký tự ?-.
Xem A new way of blogging about Prolog để biết ví dụ và hướng dẫn đầy đủ.
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/prolog.css">
<script>
window.klipse_settings = {
selector_prolog_rules: '.language-prolog-rules', // css selector for the html elements that contain prolog rules
selector_prolog_query: '.language-prolog-query', // css selector for the html elements that contain prolog queries
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js?v=7.7.1-a"></script>
Common Lisp
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_clisp: '.language-klipse-eval-clisp', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
OCaml
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_ocaml: '.language-klipse-ocaml', // selector for ocaml evaluation snippets
selector_transpile_ocaml: '.language-transpile-ocaml' // selector for ocaml transpilation snippets
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
ReasonML phiên bản 3
Lưu ý: Các đoạn mã Reason phiên bản 3 sẽ tự động được nâng cấp lên phiên bản Reason mới nhất khi một phiên bản Reason mới được phát hành.
Chúng ta có 4 loại đoạn mã ReasonML:
. Đánh giá mã
. Biên dịch sang JavaScript
. Biên dịch sang Ocaml
. Biên dịch từ Ocaml
Dưới đây là thẻ JavaScript bạn cần cài đặt để nhúng đoạn mã ReasonML vào trang web của bạn:
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_transpile_reason_3: '.language-transpile-reason', // selector for reason transpilation snippets
selector_transpile_reason_3_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for reason transpilation into ocaml snippets
selector_eval_reason_3: '.language-klipse-reason', // selector for reason evaluation snippets
selector_ocaml_to_reason: '.language-klipse-ocaml-to-reason' // selector for ocaml to reason snippets
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
ReasonML – Cú pháp cũ (không còn hỗ trợ)
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_transpile_reason: '.language-transpile-reason', // selector for reason transpilation snippets
selector_transpile_reason_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for reason transpilation into ocaml snippets
selector_eval_reason: '.language-klipse-reason' // selector for reason evaluation snippets
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
SQL
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/sql.css">
<script>
window.klipse_settings = {
selector_sql: '.sql',
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
PHP
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_php: '.language-klipse-eval-php', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
https
Nếu trang web của bạn chạy dưới giao thức https, bạn cần tải plugin klipse từ https://storage.googleapis.com/app.klipse.tech thay vì http://app.klipse.tech.
Lý do là plugin klipse được lưu trữ trên Google Cloud Storage và tạm thời là SSL is not supported for custom domains.
Cấu hình
Plugin klipse có thể được cấu hình cả ở cấp độ trang và ở cấp độ đoạn mã.
Cấu hình ở cấp độ trang
Dưới đây là các thiết lập cho plugin klipse ở cấp độ trang:
window.klipse_settings = {
eval_idle_msec: 20, // idle time in msec before the snippet is evaluated
selector: '.language-klipse', // selector for Clojure evaluation snippets
selector_js: '.language-klipse-js', // selector for Clojure transpilation snippets
selector_reagent: '.language-reagent', // selector for reagent snippets
selector_google_charts: '.language-google-charts' // selector for Google charts snippets
selector_oblivion: '.language-oblivion' // selector for oblivion snippets
selector_eval_js: '.language-klipse-eval-js', // selector for JavaScript evaluation snippets
selector_eval_ruby: '.language-klipse-eval-ruby', // selector for Ruby evaluation snippets
selector_lua: '.language-klipse-lua', // selector for lua evaluation snippets
selector_es2017: '.language-klipse-es2017', // selector for EcmaScript 2017 evaluation snippets
selector_jsx: '.language-klipse-jsx', // selector for JSX evaluation snippets
selector_transpile_jsx: '.language-transpile-jsx', // selector for JSX transpilation snippets
selector_render_jsx: '.language-render-jsx', // selector for JSX rendering snippets
selector_react: '.language-react', // selector for React snippets
selector_eval_php: '.language-klipse-eval-php', // selector for PHP evaluation snippets
selector_eval_markdown: '.language-klipse-markdown', // selector for Markdown transpilation snippets
selector_render_hiccup: '.render-hiccup', // selector for Hiccup rendering snippets
selector_transpile_hiccup: '.transpile-hiccup', // selector for Hiccup transpiling snippets
selector_eval_lambdaway: '.language-klipse-lambdaway', // selector for lambdaway transpilation snippets
selector_eval_python_client: '.language-klipse-python', // selector for Python evaluation snippets
selector_eval_cpp: '.language-klipse-cpp', // selector for cpp evaluation
selector_eval_html: '.language-klipse-html', // selector for Html evaluation snippets
selector_sql: '.language-klipse-sql', // selector for sqlite evaluation snippets
selector_eval_scheme: '.language-klipse-scheme', // selector for Scheme evaluation snippets
selector_brainfuck: '.language-klipse-brainfuck', // selector for Brainfuck snippets
selector_eval_ocaml: '.language-klipse-ocaml', // selector for Ocaml evaluation snippets
selector_transpile_ocaml: '.language-transpile-ocaml', // selector for Ocaml transpilation snippets
selector_transpile_reason_3: '.language-transpile-reason', // selector for Reason transpilation snippets
selector_transpile_reason_3_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for Reason transpilation into ocaml snippets
selector_eval_reason_3: '.language-klipse-reason', // selector for Reason evaluation snippets
selector_ocaml_to_reason: '.language-klipse-ocaml-to-reason' // selector for Ocaml to reason snippets
cached_ns_root: '/my-root', // the root of Clojure cached namespace, default: https://viebel.github.io/cljs-analysis-cache/cache/
clojure_cached_macro_ns_regexp: /reagent.*/, // the regexp for Clojure macro namespaces that are cached
clojure_cached_ns_regexp: /reagent.*/, // the regexp for clojure namespaces that are cached
codemirror_root: '/my-codemirror-root', // the root of Codemirror files
scripts_root: '/my-scripts-root', // the root of scripts files (e.g pretty_format.js, opal.js ...)
re_evaluate_all_snippets_on_change: false, // Whether all snippets should be reevaluated when any one snippet is edited, since snippets might depend on each other
editor_type: 'code-mirror', //the type of the editor for Klipse results (the element where the evaluation of the snippet is displayed). Allowed values:
// "code-mirror": The input editor is codemirror. The output editor is codemirror
// "html": The input editor is codemirror. The output editor is html
// "dom": The input editor is plain text. The output editor is plain text
};
Bên cạnh đó, bạn có thể cấu hình đầu vào CodeMirror (mã nguồn đoạn mã) và đầu ra (đánh giá đoạn mã) bằng cách đặt codemirror_options_in và codemirror_options_out:
Hiện tại, chúng tôi hỗ trợ tất cả các thiết lập CodeMirror Configuration settings và một phần của Addons settings: matchBrackets và autoCloseBrackets.
Ví dụ, bạn có thể thay đổi indentUnit, lineWrapping, lineNumbers và autoCloseBrackets như sau:
window.klipse_settings = {
codemirror_options_in: {
indentUnit: 8,
lineWrapping: true,
lineNumbers: true,
autoCloseBrackets: true
},
codemirror_options_out: {
lineWrapping: true,
lineNumbers: true
}
}
Chỉ dành cho Clojure
print_length: (mặc định 1000) số lượng tối đa của các mục trong bộ sưu tập để hiển thị – hữu ích để tránh trình duyệt bị mắc kẹt khi đánh giá các chuỗi vô tận như(range)beautify_strings: (mặc định false) khi kết quả đánh giá là một chuỗi – hiển thị “nội dung” của chuỗi mà không thoát khỏi dấu ngoặc kép.
Cấu hình ở cấp độ đoạn mã
Các thuộc tính sau có thể được thêm vào phần tử DOM của đoạn mã:
data-eval-idle-msec: (mặc định 20) thời gian không hoạt động trong mili giây trước khi đoạn mã được đánh giádata-loop-msec: (mặc định làundefined) mã được chạy trong một vòng lặp mỗidata-loop-msecmili giâydata-preamble: (mặc định"") Một chuỗi chứa mã nguồn Clojurescript cần được chạy trước nội dung của đoạn mã này, ví dụ như “(reset! canvas-id :canvas-2)”. Hữu ích để ẩn các chi tiết cài đặt khỏi người đọc trong bài viết blog, chẳng hạn như thiết lập một nguyên tửcanvas-idthành:canvas-2, hoặc để thực hiện bất kỳ thao tác cài đặt nào khác cần phải thực hiện trên cơ sở từng đoạn mãdata-editor-type: (mặc định"code-mirror") loại trình soạn thảo cho kết quả klipse (phần tử hiển thị kết quả của đoạn mã). Các giá trị cho phép: ** “code-mirror”: Trình soạn thảo đầu vào là codemirror. Trình soạn thảo đầu ra cũng là codemirror ** “html”: Trình soạn thảo đầu vào là codemirror. Trình soạn thảo đầu ra là HTML ** “dom”: Trình soạn thảo đầu vào là văn bản thuần túy. Trình soạn thảo đầu ra cũng là văn bản thuần túy
Chỉ dành cho JavaScript
data-external-libs: danh sách các thư viện JavaScript cách nhau bằng dấu phẩy để tải trước khi đánh giá đoạn mãdata-async-code: (mặc định làfalse) khitrue, cuộc gọi bất đồng bộ đếnconsole.logsẽ nối kết quả của chúng vào ô kết quả
Chỉ dành cho Clojure
Dưới đây là một live demo về các tùy chọn cấu hình ở cấp độ đoạn mã khác nhau.
Dưới đây là các thuộc tính dữ liệu được hỗ trợ trên một phần tử DOM đoạn mã klipse:
data-static-fns: (mặc định làfalse) đặt thành true để sử dụng static dispatchdata-external-libs: danh sách các kho lưu trữ github cách nhau bằng dấu phẩy để giải quyết các phụ thuộc: bạn cần cung cấp danh sách đầy đủ các phụ thuộc (bao gồm cả phụ thuộc của phụ thuộc theo đệ quy). Xem ví dụ tại Lambda Calculus with clojure and Klipsedata-print-length: (mặc định 1000) số lượng tối đa các mục trong bộ sưu tập để hiển thị – hữu ích để tránh trình duyệt bị mắc kẹt khi đánh giá các chuỗi vô tận như(range)data-beautify-strings: (mặc định false) khi kết quả đánh giá là một chuỗi – hiển thị “bên trong” chuỗi mà không thoát khỏi dấu ngoặc kép.data-verbose: (mặc định false) được truyền vào các tùy chọn:verbosecủaevalvàcompileđược tạo ra bởi hệ thống khởi động.data-max-eval-duration: (mặc định 1000) số lượng tối đa của mili giây mà đoạn mã được phép chạy đồng bộ trước khi bị gián đoạn.data-compile-display-guard: (mặc định false) khi đúng, hiển thị mã chống đói bên trong kết quả của việc biên dịch.
Giao diện
Tiện ích Klipse có thể dễ dàng được tùy chỉnh với CSS, có thể được áp dụng cả cho các yếu tố của tiện ích Klipse và các yếu tố của trình soạn thảo CodeMirror. Phần lớn các tùy chỉnh bạn áp dụng sẽ áp dụng cho CodeMirror, vì nó chứa tất cả các lớp CSS để tùy chỉnh mã chính. Xung quanh CodeMirror là tiện ích Klipse, các kiểu của nó điều khiển đường viền của tiện ích và kết quả của mã được thực thi.
Yếu tố DOM
Mỗi đoạn mã Klipse liên quan đến 4 yếu tố HTML:
. Đoạn mã Klipse chính nó: có lớp klipse-snippet.
. Kết quả: có lớp klipse-result.
. Một thùng chứa: có lớp klipse-container và có thể truy cập bên trong đoạn mã Klipse thông qua biến toàn cục klipse_container (biến toàn cục này được ràng buộc động với thùng chứa Klipse chính xác).
. Một bộ phân cách: có lớp klipse-separator.
Thay đổi kiểu của CodeMirror
Cảm ơn bạn!
Bạn có thể thay đổi giao diện của trình soạn thảo CodeMirror bằng cách chỉnh sửa CSS. Nếu bạn không muốn tạo giao diện riêng của mình, Farhad Gayour có một list of ready-made themes tuyệt vời mà bạn có thể chọn. Hãy xem qua các giao diện khác nhau bằng cách chọn chúng từ danh sách thả xuống. Sau khi bạn đã tìm thấy một giao diện bạn thích, hãy đi đến theme repo để sao chép CSS, dán nó vào tệp CSS và liên kết nó từ trang HTML chứa tiện ích Klipse của bạn.
Thay đổi kiểu của tiện ích Klipse
Để thay đổi kiểu đường viền của tiện ích Klipse và kết quả hiển thị trên bảng điều khiển, bạn cần thêm một số quy tắc kiểu bổ sung vào tệp CSS của bạn. Đây là:
.CodeMirror– chỉnh sửa đường viền của tiện ích và phần chứadivcủa CodeMirror.CodeMirror:last-child::before– chỉnh sửa tiêu đề của bảng điều khiển (ví dụ phần nói “Output:“).CodeMirror:last-child– chỉnh sửa khu vực bảng điều khiển (phần nằm dưới “Output:“)
Bạn có thể xem một ví dụ về việc tùy chỉnh giao diện Klipse tại demos/styling. Dưới đây là một live demo
Trình chiếu tương tác với Klipse
Bạn có thể xây dựng các trang chiếu tương tác bằng cách tích hợp Klipse với Reveal.js bằng cách sử dụng template for reveal.js and Klipse này.
Cộng đồng Klipse
Dưới đây là một vài ví dụ về các blog sử dụng tiện ích klipse:
- Clojure: Procedural Dungeon Generation: A Drunkard’s Walk in ClojureScript
- Python: Drawing fractals with a turtle
- Clojure: Island Generator
- ClojureScript biên dịch: blog.ducky.io – More about protocols in ClojureScript
- Ruby: jessewaites.com – interactive ruby snippets
- Clojure: z.caudate.me – live documentation with klipse
- Ruby, Javascript, Clojure: blog.klipse.tech
- Prolog: A new way of blogging about Prolog
- Tài liệu Clojure: Anonymous functions in clojure
- JavaScript: Untangled.io – Advanced ES6 destructuring techniques with live examples
- Clojure: Klipse for Kids: A fun way to learn computer programming
- JavaScript Immutable.js: An Introduction with examples written for humans
- Clojure: Yet another scheme dialect written in Clojure and ClojureScript
- JavaScript: Try Partial Lenses with KLIPSE
- JavaScript: Clause.js, a JavaScript contract system, documentation created with klipse
- Clojure: Khám phá sâu về Reagent phần 1 2 3 4
- ClojureScript: Visualising Bézier Curves
- Clojure: core.async fun tutorial
- ClojureScript: reagent and reframe playground
- JavaScript: chai unit tests playground
- Clojure: polynomial macro
- Prolog: Một bài báo khoa học với interactive code snippets: [Continuous Reasoning for Managing Next-Gen Distributed Applications] (http://eptcs.web.cse.unsw.edu.au/paper.cgi?ICLP2020.22.pdf)
Hãy đặt cho chúng tôi bất kỳ câu hỏi nào về plugin klipse (kết hợp, yêu cầu tính năng…) tại 
Truy cập vào các trình soạn thảo CodeMirror một cách programmatic
Mỗi đoạn mã được bọc trong một trình soạn thảo CodeMirror.
Các trình soạn thảo CodeMirror có thể truy cập thông qua biến toàn cục JavaScript: klipse_editors. Đây là một mảng chứa các trình soạn thảo CodeMirror bao bọc các đoạn mã gốc. Ví dụ, bạn có thể sửa nội dung của đoạn mã i bằng cách gọi: klipse_editors[i].setValue('let a = 1');
Dưới đây là một jsfiddle cho thấy cách thực hiện điều đó.
Việc đánh giá của mỗi đoạn mã cũng được bọc trong một trình soạn thảo CodeMirror. Các trình soạn thảo CodeMirror bọc kết quả có thể truy cập thông qua biến toàn cục JavaScript: klipse_results. Đây là một mảng chứa các trình soạn thảo CodeMirror bao bọc kết quả của việc đánh giá các đoạn mã. Ví dụ, bạn có thể đọc nội dung của đoạn mã i bằng cách gọi: klipse_results[i].getValue();
Dưới đây là một jsfiddle cho thấy cách thực hiện điều đó.
Sử dụng các phiên bản cũ hơn
Kể từ phiên bản 6.8.0, Klipse được xuất bản trên npm. Do đó, bạn có thể truy cập các tệp klipse của một phiên bản cụ thể từ unpkg – một cdn dành cho những thứ được xuất bản lên npm.
Ví dụ, các đường dẫn cho phiên bản 6.8.0 là:
- JavaScript được thu gọn: https://unpkg.com/klipse@6.8.0/dist/klipse_plugin.min.js
- JavaScript không thu gọn: https://unpkg.com/klipse@6.8.0/dist/klipse_plugin.min.js
- Css: https://unpkg.com/klipse@6.8.0/dist/codemirror.css
Tự host Klipse trên máy cục bộ
Bạn có thể tải xuống klipse bằng npm hoặc bower.
Để phục vụ Klipse từ máy chủ của bạn, bạn phải:
. Bạn hãy bao gồm tất cả các tài sản mà bạn cần từ thư mục dist vào trang của bạn: codemirror.css, klipse_plugin.js hoặc klipse_plugin.min.js, javascript.inc.js (phần bổ trợ JavaScript cho CodeMirror), pretty_format.js (bộ đẹp hóa JavaScript)
. đặt klipse_settings.no_dynamic_scripts=true;
Nếu bạn cần thêm các tài sản mà thông thường được tải động bởi klipse, vui lòng tải chúng xuống thủ công.
Ứng dụng Klipse – Clojure Web Repl
Dưới đây là information about the Klipse app
Web REPL đang hoạt động tại http://app.klipse.tech
Dưới đây là the manual for the KLIPSE web repl.
Ngôn ngữ được hỗ trợ trong REPL: Clojure và ClojureScript.
Chi tiết tải về:
Tác giả: viebel
Mã nguồn: https://github.com/viebel/klipse
Giấy phép: GPL-3.0 license
