{"id":21469301,"url":"https://github.com/kbismark/xyntax","last_synced_at":"2025-03-17T06:31:11.867Z","repository":{"id":209300564,"uuid":"723675531","full_name":"KBismark/xyntax","owner":"KBismark","description":"JavaScript RegExp only syntax highlighter. Pre-highlight JS codes before it hit's the browser.","archived":false,"fork":false,"pushed_at":"2025-02-04T10:50:57.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-04T11:28:56.795Z","etag":null,"topics":["javscript","regexp","syntax-highlighting","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/KBismark.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,"publiccode":null,"codemeta":null}},"created_at":"2023-11-26T12:34:33.000Z","updated_at":"2025-02-04T10:51:00.000Z","dependencies_parsed_at":"2023-12-06T01:36:24.027Z","dependency_job_id":"3931ca6a-9a66-4b75-8b8b-27a1d7feb580","html_url":"https://github.com/KBismark/xyntax","commit_stats":null,"previous_names":["kbismark/x-markdown"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fxyntax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fxyntax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fxyntax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Fxyntax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KBismark","download_url":"https://codeload.github.com/KBismark/xyntax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243985751,"owners_count":20379198,"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":["javscript","regexp","syntax-highlighting","typescript"],"created_at":"2024-11-23T09:15:12.665Z","updated_at":"2025-03-17T06:31:11.838Z","avatar_url":"https://github.com/KBismark.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xyntax\nXyntax is a lightweight, JavaScript package and CLI tool that takes syntax highlighting to the next level. \nXyntax dynamically parses your code during development, generating pre-highlighted strings. This means zero performance issues for your documentation sites on the browser.     \n\n\n# Key Features\n\n- **Dynamic Parsing:** Code is parsed during development for browser-ready highlighting.    \n\n- **Zero performance overhead:** Minimal impact on performance as no time is spent by the browser to parse code texts.    \n\n- **Theme Flexibility:** Choose from a range of themes or customize your own for a personalized code highlighting.    \n\n- **CLI support:** Imcludes support to be used via the CLI.    \n\n# Installation\n```bash\nnpm install xyntax \n\n```\n\n### Use in JS/TS projects       \n```js\nimport {ParseCodeString, ParseFile} from 'xyntax'\n\nconst code = `let myVar = 46;`\n// Highlight code\nconst highlightedCode = ParseCodeString(code);\nconsole.log(highlightedCode)\n\n// Or let xyntax find all .xmd.\u003cextension\u003e files in the sourceDirectory\nconst projectDirectory = 'path/to/project_root'\nconst source = 'directory/containing/xyntax_files' // Could also be a xyntax_file\nParseFile(source, projectDirectory)\n\n```   \n\n\n# Code Examples\nAssuming we would like to highlight the JSX code below in a documentation site using xyntax.\n```js\nconst hello = 'Hello World'\n\nfunction MyButton() {\n  return (\n    \u003cbutton\u003eI'm a button\u003c/button\u003e\n  );\n}\n\n```    \n\nWe would need to have the code below in `somfile.xmd.js` and parse via CLI using `xyntax somfile.xmd.js path/to/project_root` and insert the result into our project using `// \\insert my_identifier`    \n\n**somfile.xmd.js**\n```js\n//\u003cxyntax path=\"./some_file_in_project_root\" my_identifier\u003e\n{\nconst hello = 'Hello World'\n\nfunction MyButton() {\n  return (\n    \u003cbutton\u003eI'm a button\u003c/button\u003e\n  );\n}\n}\n//\u003c/xyntax\u003e\n```   \n\nIn our actual project where we need the highlighted string, we could insert the result in this way.    \n\n**/some_file_in_project_root**\n```js\nexport const highlightedCode = `` // \\insert  my_identifier    \n// some more codes...\n```\n\n# Usage Examples\nXyntax looks for files that ends with a ***.xmd.\u0026lt;extension\u0026gt;*** e.g. `.xmd.js` in the directory that is passed as source argument when working with the CLI or using in your JS/TS projects.     \n\n### To parse a file via CLI,\n```bash\nnpx xyntax path/to/source/file path/to/relative/directory\n```    \n\n### To parse a directory via CLI,\n```bash\nnpx xyntax path/to/source/directory path/to/relative/directory\n```     \n\n### To use in a react project created with `create-react-app`\n\nOn the terminal, navigate to the project directory and `npx xyntax --setup react`    \n- Include all xyntax files anywhere in your project\n- Do not include xyntax files in your production ready code, you only need the results which are inserted automatically by xyntax.    \n\n### To use in a react project when you have access to the `webpack.config.js`\n\nAdd the code below to the webpack config's rules   \n```js\n{\n    test:/(\\.xmd\\.[a-zA-Z]+)$/,\n    exclude:/node_modules/,\n    loader: require('xyntax/lib/loaders/react')\n}\n```\n\n# TODO\n- Extend usage support to other popular web frameworks\n- Improve the highlighting engine (codes) to add more language highlighting    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Fxyntax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbismark%2Fxyntax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Fxyntax/lists"}