{"action":"created","issue":{"url":"https://api.github.com/repos/PrismJS/prism/issues/947","repository_url":"https://api.github.com/repos/PrismJS/prism","labels_url":"https://api.github.com/repos/PrismJS/prism/issues/947/labels{/name}","comments_url":"https://api.github.com/repos/PrismJS/prism/issues/947/comments","events_url":"https://api.github.com/repos/PrismJS/prism/issues/947/events","html_url":"https://github.com/PrismJS/prism/issues/947","id":153030745,"number":947,"title":"Plugin to use custom class name","user":{"login":"dvkndn","id":5953369,"avatar_url":"https://avatars.githubusercontent.com/u/5953369?v=3","gravatar_id":"","url":"https://api.github.com/users/dvkndn","html_url":"https://github.com/dvkndn","followers_url":"https://api.github.com/users/dvkndn/followers","following_url":"https://api.github.com/users/dvkndn/following{/other_user}","gists_url":"https://api.github.com/users/dvkndn/gists{/gist_id}","starred_url":"https://api.github.com/users/dvkndn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvkndn/subscriptions","organizations_url":"https://api.github.com/users/dvkndn/orgs","repos_url":"https://api.github.com/users/dvkndn/repos","events_url":"https://api.github.com/users/dvkndn/events{/privacy}","received_events_url":"https://api.github.com/users/dvkndn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2016-05-04T14:48:10Z","updated_at":"2016-05-04T18:22:22Z","closed_at":null,"body":"**Idea:** I want to customize those classes generated by Prism for each token (for example, `var` in JS will be generated to `<span class=\"token keyword\">var</span>`. I want to change the string \"token keyword\".\r\n\r\n**Reason:** Some situation require me to use locally scoped classes, like in a CSS Modules project or one that follow BEM Style.\r\n\r\n**Solution:** I wrote a small plugin, based on [Highlight Keyword](http://prismjs.com/plugins/highlight-keywords/), to customize those classes using a style-map object. The object looks like this:\r\n\r\n```javascript\r\nvar customStyleMap = {\r\n  tokenType: className\r\n}\r\n```\r\nwith `tokenType` is type of token I want to customize (eg: `'keyword'`, `'string'`, `'operator'`...) and `className` is the class string I want to use for that token (eg: `'my-special-class-for-token'` or a hashed one like `'_3ka93h'`\r\n\r\n**Example Usage:**\r\n\r\n```javascript\r\nvar customStyleMap = {\r\n  keyword: 'special-keyword',\r\n  string: 'special-string'\r\n};\r\ncustomizePrismClasses(customStyleMap);\r\n```\r\n\r\nOr we can use the object returned by CSS Modules:\r\n```javascript\r\nvar customStyleMap = require('my-custom-style-map.css');\r\ncustomizePrismClasses(customStyleMap);\r\n```\r\n\r\nThen, the string `var` will become `<span class=\"special-keyword\">var</span>`.\r\n\r\nThe source code is very simple, but I think it is useful, especially for project which we want to scope the class name locally, like CSS Modules projects.\r\n\r\nPlease tell me what do you guys think about this. I'll make a pull request if you think it is useful enough."},"comment":{"url":"https://api.github.com/repos/PrismJS/prism/issues/comments/216955622","html_url":"https://github.com/PrismJS/prism/issues/947#issuecomment-216955622","issue_url":"https://api.github.com/repos/PrismJS/prism/issues/947","id":216955622,"user":{"login":"LeaVerou","id":175836,"avatar_url":"https://avatars.githubusercontent.com/u/175836?v=3","gravatar_id":"","url":"https://api.github.com/users/LeaVerou","html_url":"https://github.com/LeaVerou","followers_url":"https://api.github.com/users/LeaVerou/followers","following_url":"https://api.github.com/users/LeaVerou/following{/other_user}","gists_url":"https://api.github.com/users/LeaVerou/gists{/gist_id}","starred_url":"https://api.github.com/users/LeaVerou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LeaVerou/subscriptions","organizations_url":"https://api.github.com/users/LeaVerou/orgs","repos_url":"https://api.github.com/users/LeaVerou/repos","events_url":"https://api.github.com/users/LeaVerou/events{/privacy}","received_events_url":"https://api.github.com/users/LeaVerou/received_events","type":"User","site_admin":false},"created_at":"2016-05-04T18:22:22Z","updated_at":"2016-05-04T18:22:22Z","body":"I think @dvkndn should submit a PR with a basic version of this plugin, and he can add this functionality in the future, if people request it. I suggested it in case it was trivial. I don't think it's worth spending any more time on this, unless people actually ask about it."}}