{"id":15018382,"url":"https://github.com/nativescript/markdown-snippet-injector","last_synced_at":"2025-10-19T16:30:46.424Z","repository":{"id":141978050,"uuid":"52005232","full_name":"NativeScript/markdown-snippet-injector","owner":"NativeScript","description":"A tool for injecting code snippets into MarkDown files.","archived":false,"fork":false,"pushed_at":"2019-03-14T05:31:00.000Z","size":51,"stargazers_count":4,"open_issues_count":2,"forks_count":6,"subscribers_count":30,"default_branch":"master","last_synced_at":"2024-10-29T15:51:51.418Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/NativeScript.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},"funding":{"github":"NativeScript","open_collective":"nativescript"}},"created_at":"2016-02-18T12:19:08.000Z","updated_at":"2020-04-30T20:53:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"d75cd21b-9d06-4cdf-9123-fc915de13549","html_url":"https://github.com/NativeScript/markdown-snippet-injector","commit_stats":{"total_commits":55,"total_committers":12,"mean_commits":4.583333333333333,"dds":0.509090909090909,"last_synced_commit":"5b74e61476d9c806c7bd7ad86827e3f00e21475e"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fmarkdown-snippet-injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fmarkdown-snippet-injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fmarkdown-snippet-injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fmarkdown-snippet-injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/markdown-snippet-injector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237163197,"owners_count":19265227,"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":[],"created_at":"2024-09-24T19:51:54.207Z","updated_at":"2025-10-19T16:30:41.144Z","avatar_url":"https://github.com/NativeScript.png","language":"TypeScript","funding_links":["https://github.com/sponsors/NativeScript","https://opencollective.com/nativescript"],"categories":[],"sub_categories":[],"readme":"# Welcome to `markdown-snippet-injector`\nA tool for injecting code snippets into MarkDown files:\n\n1. Define snippets in your source by using a simple notation\n2. Put placeholders associated with the snippets in your MarkDown files\n3. Run MarkDown injector to replace the placeholders during your documentation build:\n\n`mdinject --root=\u003cpath-to-source-code\u003e --docsroot=\u003cpath-to-docs\u003e`\n\n# Using `markdown-snippet-injector`\n\n## Defining snippets in `JavaScript` and `TypeScript` source files\n\nDefining code snippets in your source files is done by enclosing them as shown below:\n\n```\n// \u003e\u003e sum-snippet\nexport function sum(a, b){\n    return a + b;\n}\n// \u003c\u003c sum-snippet\n\n// \u003e\u003e multiplication-snippet\nexport function multiply(a, b){\n    return a * b;\n}\n// \u003c\u003c multiplication-snippet\n\n// \u003e\u003e division-snippet\nexport function divide(a, b){\n    return a / b;\n}\n// \u003c\u003c division-snippet\n```\n\n## Defining source snippets in `XML` files\nIf you want to define a code-snippet in a `XML` file you should use the following approach:\n\n```XML\n\u003c!-- \u003e\u003e listview-first-look --\u003e\n\u003cnavigation:ExamplePage xmlns:navigation=\"navigation/example-page\" loaded=\"onPageLoaded\" xmlns:lv=\"nativescript-telerik-ui/listview\" xmlns=\"http://www.nativescript.org/tns.xsd\"\u003e\n    \u003clv:RadListView items=\"{{ dataItems }}\" \u003e\n        \u003clv:RadListView.listViewLayout\u003e\n            \u003clv:ListViewLinearLayout scrollDirection=\"Vertical\"/\u003e\n        \u003c/lv:RadListView.listViewLayout\u003e\n        \u003clv:RadListView.itemTemplate\u003e\n            \u003cStackLayout orientation=\"vertical\"\u003e\n                \u003cLabel fontSize=\"20\" text=\"{{ itemName }}\"/\u003e\n                \u003cLabel fontSize=\"14\" text=\"{{ itemDescription }}\"/\u003e\n            \u003c/StackLayout\u003e\n        \u003c/lv:RadListView.itemTemplate\u003e\n    \u003c/lv:RadListView\u003e\n\u003c/navigation:ExamplePage\u003e\n\u003c!-- \u003c\u003c listview-first-look --\u003e\n```\n\n## Defining source snippets in `CSS` files\nCode snippets inside CSS files are defined as follows:\n\n``` CSS\n/* \u003e\u003e css-snippet */\n.btn {\n    color: green;\n    text-align: center;\n}\n/* \u003c\u003c css-snippet */\n```\n\n## Defining placeholders for the snippets in your `MarkDown` files\nUse the `\u003csnippet id='\u003cyour-snippet-id\u003e'/\u003e` notation to define the corresponding placeholders in your markdown files. They will be replaced by the snippet injector when run:\n\n```MarkDown\n    # Using the multiply function:\n        \u003csnippet id='multiplication-snippet'/\u003e\n    # Using the sum function:\n        \u003csnippet id='sum-snippet'/\u003e\n```\n\nIf you set `-w` flag your snippets will be wrapped around the snippet notation you have been provided. This way when you update your snipet source - the `markdown-snippet-injector` will reflect the changes in your markdown as well.\n\nExample:\n\n`mdinject -w --root=\u003cpath-to-source-code\u003e --docsroot=\u003cpath-to-docs\u003e`\n\nmain.css\n```\n/* \u003e\u003e css-snippet */\n.btn {\n    color: green;\n    text-align: center;\n}\n/* \u003c\u003c css-snippet */\n```\n\nREADME.MD\n```\nThis is a CSS snippet\n\u003csnippet id='css-snippet'/\u003e\n```\n\nAfter first build the README.MD will looks like:\n```\nThis is a CSS snippet\n\u003csnippet id='css-snippet'\u003e\n```\n.btn {\n    color: green;\n    text-align: center;\n}\n```\n\u003c/snippet\u003e\n```\nThen when you update `main.css`, your README.MD will be updated as well.\n\n# Advanced features\n## Nested snippets\nNested snippets are also supported. This is helpful in scenarios where you want to explain parts of a larger snippet in steps:\n\n```\n// \u003e\u003e view-model-snippet\nexport class ViewModel {\n\n    private _items: ObservableArray\u003cDataItem\u003e;\n\n    constructor() {\n        this.initDataItems();\n    }\n\n    get dataItems() {\n        return this._items;\n    }\n// \u003e\u003e handling-event-snippet\n    public onShouldRefreshOnPull(args: listViewModule.ListViewEventData) {\n        var that = new WeakRef(this);\n        console.log(\"Event fired\");\n        timer.setTimeout(function() {\n            for (var i = 0; i \u003c 25; i++) {\n                that.get()._items.splice(0, 0, new DataItem(that.get()._items.length, \"Item \" + that.get()._items.length, \"This is item description.\"));\n\n            }\n            var listView = args.object;\n            listView.notifyPullToRefreshFinished();\n        }, 1000);\n\n    }    \n// \u003c\u003c handling-event-snippet\n\n    private initDataItems() {\n        this._items = new ObservableArray\u003cDataItem\u003e();\n\n        for (var i = 0; i \u003c 25; i++) {\n            this._items.push(new DataItem(i, \"Item \" + i, \"This is item description.\"));\n        }\n    }\n}\n\nexport class DataItem {\n    public id: number;\n    public itemName;\n    public itemDescription;\n\n    constructor(id: number, name: string, description: string) {\n        this.id = id;\n        this.itemName = name;\n        this.itemDescription = description;\n    }\n}\n// \u003c\u003c view-model-snippet\n```\nThis will produce two code snippets: one containing the whole view-model class and the other containing the `onShouldRefreshOnPull` function.\n\n## Hiding Blocks\nYou can mark parts of the original code to be hidden - not shown in the documentation:\n``` TS\n// \u003e\u003e ts-snippet-with-hidden-section\nexport function div(a, b){\n    // \u003e\u003e (hide)\n    console.log(\"You should not see this!\")\n    // \u003c\u003c (hide)    \n    return a / b;\n}\n// \u003c\u003c ts-snippet-with-hidden-section\n```\nThe syntax is similar in `XML` and `CSS`.\n\n## Defining file extension filters\nYou can choose what kind of files will be processed during snippet injection by using the `--sourceext` and `--targetext` parameters. The default values of these properties are `.ts` and `.md` respectively.\n\n### Multiple source and target extension types\nYou can define multiple source or target extension types by setting the corresponding parameters to a set of extensions separated by a `|`:\n```\nmdinject --root=. --docsroot=../ --sourceext=\".ts|.js\" --targetext=\".md|.txt\"\n```\nIn this way all target files will be processed and the corresponding snippet placeholders will be replaced.\n\n## Defining a title for the injected snippet\nWhen injected, a snippet is formatted using the default MarkDown code-snippet format. You can append a title to the injected snippet by using the `--snippettitles` parameter. By default, `.js` and `.ts` files are recognized and the snippets coming from them are titled `JavaScript` or `TypeScript`. You can define custom snippet titles by setting the `--snippettitles` parameter to a set of titles separated by a `|`:\n```\nmdinject --root=. --docsroot=../ --sourceext=\".java|.cs\" --targetext=\".md|.txt\" --snippettitles=\"Java|C#\"\n```\n\u003e Note that the order of the snippet titles must be the related to the order of the source extension types so that they match.\n\n## Run e2e tests\n1. Clone repo\n2. npm install\n3. npm test\n\nE2E tests are developed with [Mocha](https://mochajs.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fmarkdown-snippet-injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fmarkdown-snippet-injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fmarkdown-snippet-injector/lists"}