什么是 blocke
blocke 是一个开源的 npm 包,用于通过自定义的 HTML/CSS 代码块快速创建可定制化的编程练习题和教学示例。
blocke 的优点
- 强大的自定义性和可扩展性
- 简单易用的 API
- 高度可读性的代码块模版
- 灵活的事件和交互控制
安装 blocke
要使用 blocke,你需要先安装它。你可以选择在你的项目根目录终端运行以下命令:
--- ------- ------
或者,在你的 package.json 文件 dependencies 标签内添加:
--------------- - --------- -------- -
blocke 的基本使用
- 导入 blocke
----- ------ - ------------------
- 定义 HTML 和 CSS 代码块
----- ------ - - --------- ----- ------ ------ --------- ------ ------------- ------- ------ --------- ----------- ------- --------- ----- ----- - - ---- - ----------------- ------- - -- -- ------ ------ --- ---- ----------- ------ ------ ---- -----------------------------
const blockeContainer = document.querySelector('#blocke-container'); const myBlocke = blocke.create({ html: myHtml, css: myCSS, container: blockeContainer, });
-- -- ------ ----------- ---- ------------ ------------- ----- --------- -- - ------ ------- ------ ----------------------------------- -- --- ---- ------ ------- ------------------- ------------ --- -- --- ---------- ------------------------------
const myHtmlWithButton = `
My Blocke BlockHello World!
Click Me! `;const myBlockeWithButton = blocke.create({ html: myHtmlWithButton, css: myCSS, container: blockeContainer, });
const button = myBlockeWithButton.querySelector('#myButton'); button.addEventListener('click', () => { alert('You clicked me!'); });
-- - ------ -------- ------ ------ ---- ------------------------ -- --- ---- -------- ----- -------- -- ------ ------ ------------ ----------- --- -- --- ---------- ---- ----- ---------------------
const myHtmlWithInput = `
My Blocke BlockHello World!
`;const myBlockeWithInput = blocke.create({ html: myHtmlWithInput, css: myCSS, container: blockeContainer, });
const input = myBlockeWithInput.querySelector('#myInput');
input.addEventListener('input', () => {
const value = input.value;
console.log(User input: ${value}
);
});
-- -- ------ ----------- --- ------------ -------- ----------------- ------ ----------- ------ --------------------------- ------------------------------------------------------------------------------ ---------- -----------------------------------------------------------------------------------------------------------------------------