{"id":15034239,"url":"https://github.com/kazzkiq/codeflask","last_synced_at":"2025-12-12T03:32:03.385Z","repository":{"id":36476300,"uuid":"40781837","full_name":"kazzkiq/CodeFlask","owner":"kazzkiq","description":"A micro code-editor for awesome web pages.","archived":false,"fork":false,"pushed_at":"2023-09-17T11:30:27.000Z","size":6672,"stargazers_count":1098,"open_issues_count":34,"forks_count":122,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-03T18:09:41.614Z","etag":null,"topics":["code-editor","css","highlight","html","javascript"],"latest_commit_sha":null,"homepage":"https://kazzkiq.github.io/CodeFlask/","language":"JavaScript","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/kazzkiq.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}},"created_at":"2015-08-15T19:58:05.000Z","updated_at":"2025-03-30T09:59:16.000Z","dependencies_parsed_at":"2024-01-13T19:35:41.988Z","dependency_job_id":"0b9f432f-dd3f-4816-b4b4-8698b06689b6","html_url":"https://github.com/kazzkiq/CodeFlask","commit_stats":{"total_commits":146,"total_committers":27,"mean_commits":5.407407407407407,"dds":"0.40410958904109584","last_synced_commit":"2805db74727a2741824e19e65d68b9d4eea7655f"},"previous_names":["kazzkiq/codeflask.js"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2FCodeFlask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2FCodeFlask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2FCodeFlask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2FCodeFlask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kazzkiq","download_url":"https://codeload.github.com/kazzkiq/CodeFlask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335004,"owners_count":21086489,"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","css","highlight","html","javascript"],"created_at":"2024-09-24T20:24:21.344Z","updated_at":"2025-12-12T03:32:03.352Z","avatar_url":"https://github.com/kazzkiq.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/codeflask.svg)](https://www.npmjs.com/package/codeflask)\n[![Build Status](https://travis-ci.org/kazzkiq/CodeFlask.svg?branch=master)](https://travis-ci.org/kazzkiq/CodeFlask)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" width=\"190\"\u003e\u003cbr\u003e\n    CodeFlask: A micro code-editor for awesome web pages.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"code.png\" width=\"739\"\u003e\n\u003c/p\u003e\n\n## Installation\n\nYou can install CodeFlask via npm:\n\n```\nnpm install codeflask\n```\n\nOr use it directly in browser via cdn service:\n\n```\nhttps://unpkg.com/codeflask/build/codeflask.min.js\n```\n\n## Usage\n\n```js\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', { language: 'js' });\n```\nYou can also pass a DOM element instead of a selector:\n```js\nimport CodeFlask from 'codeflask';\n\nconst editorElem = document.getElementById('editor');\nconst flask = new CodeFlask(editorElem, { language: 'js' });\n```\nUsage with Shadow DOM:\n```js\nimport CodeFlask from 'codeflask';\n...\nconst shadowElem = this.shadowRoot.querySelector('#editor');\nconst flask = new CodeFlask(shadowElem, { language: 'js', styleParent: this.shadowRoot });\n```\n### Listening for changes in editor\n\n```js\nflask.onUpdate((code) =\u003e {\n  // do something with code here.\n  // this will trigger whenever the code\n  // in the editor changes.\n});\n```\n\n### Updating the editor programatically\n\n```js\n// This will also trigger .onUpdate()\nflask.updateCode('const my_new_code_here = \"Blabla\"');\n```\n\n### Getting the current code from editor\n\n```js\nconst code = flask.getCode();\n```\n\n### Enabling line numbers\n\n```js\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', {\n  language: 'js',\n  lineNumbers: true\n});\n```\n\n### Enabling rtl (right to left writing)\n\n```js\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', {\n  language: 'js',\n  rtl: true\n});\n```\n\n### Enabling read only mode\n\n```js\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', {\n  language: 'js',\n  readonly: true\n});\n```\n\n### Adding other languages support:\n\n```js\nflask.addLanguage('ruby', options)\n```\n\n#### For Example to add 'Ruby'\n\n```js\nimport Prism from 'prismjs';\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', {\n  language: 'ruby',\n  readonly: true\n});\n\nflask.addLanguage('ruby', Prism.languages['ruby']);\n```\n\nThis API is simply a proxy to add a new language to [Prism](http://prismjs.com/) itself (the code highlighter). The `options` parameter must be the same accepted in Prism. You can read more about it [here](http://prismjs.com/extending.html#language-definitions).\n\nBy default, CodeFlask supports the following languages (which are also the default supported in Prism):\n\n- Markup (HTML/XML);\n- CSS;\n- C-like;\n- JavaScript;\n\n### Adding your own theme to CodeFlask\n\nBy default, CodeFlask comes with a simple theme made from scratch called **[CodeNoon](https://github.com/kazzkiq/CodeFlask.js/blob/master/src/styles/theme-default.js)**.\n\nYou can easily override this theme with your own by writting your own CSS and adding it to your project. If that's the case, you should also disable **CodeNoon** with the `defaultTheme` option:\n\n```js\nimport CodeFlask from 'codeflask';\n\nconst flask = new CodeFlask('#my-selector', {\n  language: 'js',\n  defaultTheme: false\n});\n```\n\n# Credits \u0026 Thanks\n\nCodeFlask.js was made possible by awesome open-source projects such as [Prism.js](https://github.com/PrismJS/prism) and [Rollup](https://github.com/rollup/rollup).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazzkiq%2Fcodeflask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazzkiq%2Fcodeflask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazzkiq%2Fcodeflask/lists"}