{"id":17715670,"url":"https://github.com/jmjuanes/codecake","last_synced_at":"2025-05-07T15:24:10.369Z","repository":{"id":57202247,"uuid":"442136062","full_name":"jmjuanes/codecake","owner":"jmjuanes","description":":cake: A tiny code editor for the web","archived":false,"fork":false,"pushed_at":"2025-01-08T18:32:26.000Z","size":264,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-01T07:08:42.075Z","etag":null,"topics":["code-editor","editor","highlight","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://www.josemi.xyz/codecake/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmjuanes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-12-27T11:08:41.000Z","updated_at":"2025-04-27T06:58:18.000Z","dependencies_parsed_at":"2024-03-13T20:29:33.968Z","dependency_job_id":"e8830caa-3308-41ea-9f8f-4e0c3a8edb9e","html_url":"https://github.com/jmjuanes/codecake","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmjuanes%2Fcodecake","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmjuanes%2Fcodecake/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmjuanes%2Fcodecake/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmjuanes%2Fcodecake/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmjuanes","download_url":"https://codeload.github.com/jmjuanes/codecake/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252903610,"owners_count":21822476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-editor","editor","highlight","syntax-highlighting"],"created_at":"2024-10-25T12:06:41.383Z","updated_at":"2025-05-07T15:24:10.350Z","avatar_url":"https://github.com/jmjuanes.png","language":"HTML","readme":"![CodeCake](./header.png)\n\n\n![npm version](https://badgen.net/npm/v/codecake?labelColor=1d2734\u0026color=21bf81)\n![license](https://badgen.net/github/license/jmjuanes/codecake?labelColor=1d2734\u0026color=21bf81)\n\nWhy another code editor for the web? I wanted something very simple, tiny and minimalistic, just for editing small chunks of HTML, JavaScript or CSS. Finally I decided to create my own code editor with a small syntax highlight.\n\n## Demo\n\nVisit [josemi.xyz/codecake](https://www.josemi.xyz/codecake) to see a working example of the **CodeCake** editor.\n\n## Getting started\n\nYou can install **CodeCake** using npm or yarn:\n\n```bash\n## Install using NPM\n$ npm install --save codecake\n\n## Or install using yarn\n$ yarn add codecake\n```\n\nIn your HTML code, import the `codecake.css` style:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/codecake/codecake.css\"\u003e\n```\n\nCreate a new `\u003cdiv\u003e` element:\n\n```html\n\u003cdiv id=\"editor\" class=\"\"\u003e\u003c/div\u003e\n```\n\nIn your `\u003cscript type=\"module\"\u003e` tag, import **CodeCake** and initialize the editor:\n\n```html\n\u003cscript type=\"module\"\u003e\n    import * as CodeCake from \"https://unpkg.com/codecake/codecake.js\";\n\n    const parent = document.getElementById(\"editor\");\n    const cake = CodeCake.create(parent, {\n        language: \"javascript\",\n        className: \"codecake-dark\",\n        highlight: CodeCake.highlight,\n    });\n\u003c/script\u003e\n```\n\n## API\n\n### CodeCake.create(target, options)\n\nThe first argument of the `CodeCake.create` function is the reference to the `\u003cdiv\u003e` element. The second argument is an object with the editor options:\n\n- `language`: language of the code. This value will be also passed as the second argument of the function provided in `options.highlight`. Default is `\"\"`.\n- `readOnly`: editor will be in read-only mode. Default is `false`.\n- `lineNumbers`: editor will display line numbers. Default is `false`.\n- `indentWithTabs`: editor will use the tab character `\"\\t\"` for indentation instead of spaces. Default is `false`.\n- `tabSize`: number of spaces for a tab. Default is `4`.\n- `autoIndent`: automatically add indentation on new lines. It also adds an extra line on closing brackets, braces and parenheses. Default is `true`.\n- `addClosing`: automatically close brackets, braces, parentheses, and quotes. Default is `true`.\n- `highlight`: provide a custom function to highlight code. Default is `null` (no highlight). The provided function will be called with the current code to highlight and the language string provided in `options.language`.\n- `className`: custom classname to customize the editing area. Default is `\"\"`.\n\nThe `CodeCake.create` function will return an object with some methods that you can use to manipulate the editor.\n\nUse `cake.getCode()` to get the current code in the editor.\n\n```javascript\nconst code = cake.getCode();\n```\n\nUse `cake.setCode(newCode)` to update the code displayed in the editor.\n\n```javascript\ncake.setCode(\"Hello world\");\n```\n\nUse `cake.onChange` to register a listener that will be called each time user changes the code.\n\n```javascript\ncake.onChange(code =\u003e {\n    console.log(\"New code: \", code);\n});\n```\n\n### CodeCake.highlight(code, language)\n\nWe provide a tiny highlight module that you can use to highlight the text in your editor. Only basic web languages are supported (`html`, `javascript`,`css`, and `markdown`). Use this function with the `options.highlight` argument:\n\n```javascript\nCodeCake.create(parent, {\n    language: \"javascript\",\n    highlight: (code, lang) =\u003e {\n        return CodeCake.highlight(code, lang);\n    },\n    // ...other editor options\n});\n```\n\n## Themes\n\nWe provide two themes to customize the editor and the highlighted code: `codecake-light` and `codecake-dark`.\n\n```js\nconst cake = CodeCake.create(parent, {\n    className: \"codecake-dark\",\n    // ...other editor options\n});\n```\n\n## Custom highlight\n\nYou can use other syntax highlight like [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/). Call the syntax highlighter using the `options.highlight` option of `CodeCake.create`:\n\n```js\nCodeCake.create(parent, {\n    language: \"javascript\"\n    highlight: (code, lang) =\u003e {\n        return hljs.highlight(code, {language: lang}).value;\n    },\n    // ...other editor options\n});\n```\n\n## Preventing keyboard trap\n\nThe `Tab` key is commonly used by developers to indent code. However, this can sometimes lead to unexpected behavior, where the focus remains trapped within the editor, disrupting the workflow. To address this, we have introduced the `Esc` `Tab` key combination to move to the next focusable element, and the `Esc` `Shift + Tab` key combination to move to the previous focusable element.\n\nPlease note that **we do not provide built-in help or a dedicated user interface for this feature**. This is because the editor is designed as a lightweight code editor component, not a standalone application. Users are encouraged to consult the documentation or any user guides provided within the context of the web application that incorporates this component for information on available keyboard shortcuts and features.\n\n## License\n\nCodeCake is released under the [MIT License](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmjuanes%2Fcodecake","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmjuanes%2Fcodecake","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmjuanes%2Fcodecake/lists"}