{"id":26220951,"url":"https://github.com/budavariam/show-code-examples","last_synced_at":"2026-04-26T14:31:28.238Z","repository":{"id":57358921,"uuid":"352015389","full_name":"budavariam/show-code-examples","owner":"budavariam","description":"Module to view source code in html presentations","archived":false,"fork":false,"pushed_at":"2021-05-24T09:24:47.000Z","size":378,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-17T08:18:27.593Z","etag":null,"topics":["highlightjs","modal","react","webpack"],"latest_commit_sha":null,"homepage":"","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/budavariam.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}},"created_at":"2021-03-27T07:59:55.000Z","updated_at":"2021-05-24T09:24:49.000Z","dependencies_parsed_at":"2022-09-06T22:21:54.328Z","dependency_job_id":null,"html_url":"https://github.com/budavariam/show-code-examples","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fshow-code-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fshow-code-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fshow-code-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budavariam%2Fshow-code-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/budavariam","download_url":"https://codeload.github.com/budavariam/show-code-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243241905,"owners_count":20259673,"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":["highlightjs","modal","react","webpack"],"created_at":"2025-03-12T15:28:55.755Z","updated_at":"2025-12-25T14:37:39.640Z","avatar_url":"https://github.com/budavariam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# show-code-examples\n\nModule to view source code in html presentations.\n\nSee it live on [github pages](https://budavariam.github.io/show-code-examples).\n\n- Uses [highlight.js](https://www.npmjs.com/package/highlight.js) to annotate the code.\n- Detects source code language by file extension\n- Caches source code downloads\n\n![Monokai theme with example js code](./docs/images/example.png)\n\n## Design decisions\n\nI created slides with reveal.js for one of my training courses.\nI needed a way to:\n\n- show code without leaving the presentation\n- open examples in full screen mode\n- be able to download the source of the files\n- call from the source with a minimal overhead\n- scrollable overlay for the examples\n\nMy final approach looked like this:\n\n```md\n\u003cscript\u003e\nvar codeExamples = {open: function(event, domnode){\n    //here be LONG vanilla js code\n}}\n\u003c/script\u003e\n\n- [First Examples](./examples/1/hello.sh){onclick=\"codeExamples.open(event, this)\"} {.examples}\n- [Second Examples](./examples/2/hello.awk){onclick=\"codeExamples.open(event, this)\"} {.examples}\n- [Third Examples](./examples/3/hello.py){onclick=\"codeExamples.open(event, this)\"} {.examples}\n```\n\nAt first I only needed to use it in one presentation, but I plan on using it in more presentations later on.\nThat's why I extracted this logic into this repository and module.\n\n## Browser support\n\nI've created this tool for personal use, and I only used it from desktop Chrome.\n\nIf you miss a feature, send an issue. In the meantime you can override css and PRs are welcome.\n\n## Getting started\n\n```bash\n# open the example\nnpm install\nln -s ./docs ./show-code-examples\nnpm run example\nopen http://localhost:8080/show-code-examples\n```\n\n## How to use\n\n- Reference a `highlight.js` theme in your page e.g:\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"highlight.js/styles/monokai.css\" /\u003e\n  ```\n\n- Load the code in your page\n\n  ```html\n  \u003cscript src=\"/dist/show-code-examples.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  ```\n\n- Optional: Set the parent container for the modal: `codeExamples.initialize(\"my-examples-modal\")`\n- Create a link to load up the modal. This boilderplate is necessary: `codeExamples.open(event, this)`\n\n  ```html\n  \u003ca\n    href=\"code/hello-bash.sh\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    onclick=\"codeExamples.open(event, this)\"\n  \u003e\n    Bash code example\n  \u003c/a\u003e\n  ```\n\n## Documentation\n\n### codeExamples.initialization(id)\n\nSet a global variable of where to attach the next code viewer modal.\n\nIf you don't set a value it will treat as if it's a self managed full screen viewer.\n`.sce-noscroll` will be added to the body element, in order to prevent scrolling while the overlay is active.\n\nOtherwise I assume that you don't want fullscreen view, so `.sce-embedded` class will be\nadded to the children of the given container. Some classes are overridden, to work properly.\n\n### codeExamples.open(event, this)\n\nMust be added to an `anchor` tag. It loads the examle file from its `href` location.\nIt does not open or download the file when the link has been clicked.\n\n## How it works\n\nThe component is written in [React](https://reactjs.org/).\nIt's rendered by `ReactDOMRenderer`.\nIt's built by [webpack](https://webpack.js.org/).\n\nThere are 2 distinguishable modes:\n\n- **Full page view**: Upon opening it creates a DOM node as the last child of the `body`, and renders the react component into it.\n  After it's added it won't be destroyed by the component. A state manages whether it needs to open or not.\n  It will be reused on consequent clicks.\n- **Custom layout**: Same as above with the difference that it will render the component into the given node.\n  I made an assumption that if you want to manage the node by yourself it won't be full layout view, some classes has overrides,\n  you can customize the layout behaviours with your custom css.\n\n## Development\n\n1. Clone the repo\n1. Run `npm install`\n1. Run `npm run dev`\n1. Create a link to `show-code-examples` to match with the github-pages paths\n1. Change script location to `\u003cscript src=\"/dist/show-code-examples.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e`\n1. Run the example `npm run example`\n\nSee [index.html](/docs/index.html) for a full example.\n\n## Contribution\n\n- Fork, modify, send pull request\n- I currently use prettify for file formatting, but it's not enforced yet\n\n## Publish\n\n```bash\n# set up gpg for `npm version` command\nnpm config set sign-git-tag true\ngit config --global gpg.program $(which gpg)\n\nnpm login\nnpm run build\nnpm version patch\n# npm pack # check tar file\nnpm publish\ngit push --tags\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudavariam%2Fshow-code-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbudavariam%2Fshow-code-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudavariam%2Fshow-code-examples/lists"}