{"_id":"@bulletlogic/gatsby-remark-classes","name":"@bulletlogic/gatsby-remark-classes","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@bulletlogic/gatsby-remark-classes","version":"1.0.4","description":"Automatically add class attributes to rendered markdown elements","type":"module","main":"index.js","keywords":["gatsby","gatsby-plugin"],"author":{"name":"Chris Greindl","email":"chris.greindl@gmail.com"},"license":"MIT","dependencies":{"unist-util-select":"^4.0.3"},"repository":{"type":"git","url":"git+https://github.com/bulletlogic/gatsby-remark-classes.git"},"bugs":{"url":"https://github.com/bulletlogic/gatsby-remark-classes/issues"},"devDependencies":{"nth-check":"^2.1.1"},"gitHead":"5eaeb768103f7b254c9bc6f6f45b8c9de75a05fe","homepage":"https://github.com/bulletlogic/gatsby-remark-classes#readme","_id":"@bulletlogic/gatsby-remark-classes@1.0.4","_nodeVersion":"18.12.1","_npmVersion":"9.6.1","dist":{"integrity":"sha512-HJgbIO2TAznJ8VHjoFfKlSBgEr2z9k2h6aC/qcgXdcDCC9iDhpLQ1RGQhvXoI79cZnWPpDYkfKZEr08m/qIN+g==","shasum":"810477f1ad97678e9d8c3293abfd9f5b3283f4c8","tarball":"https://registry.npmjs.org/@bulletlogic/gatsby-remark-classes/-/gatsby-remark-classes-1.0.4.tgz","fileCount":6,"unpackedSize":11990,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5ZZsu4oD5feTUU+YdjpgcuWcyyBi+biQ+PmdRJ30vNAiEA0LW+6JOkOBIL44YiM/8NO0ryYlEz5S0sO5fh2c7psPs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFivDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+zRAAhNEWRl9R1TB6NLY7QeSDY6TAGZwVPRDz9eWwPmtSn1SeSInX\r\nUXQRGfrjxnjkl9qCQrEYrQdXmqDQQ/AZH7y/cPSPYlWm1Wy1u+W6W6jyMLMV\r\nAF+oD829xL+Co20mUzuNKd91ItsPgvIiSx9YbBgCK29z+ax4Z64f3i4iYsW9\r\nmey59ud/oGY1v2vrxaaOLYGt80XHsEAsbnu4p1HUTrs4RjRCucydfU7bDOhI\r\nXQs5rpyyEUWK5KMz+W2VqJpWk25OLNuTyzn9WGecr6ZmBK4Z4vb2xi47TZtw\r\n1KIJIyeWbnqqCwzDoyd2FOTkbT7KAAvEYxRwkgj5ajGSi8/1YEFmNeYkPET7\r\narmDYppux4R5SIi+WaGHY3H3DnKn8AfRhIDg3bqxWcuw/yUvMEufcVOUMko1\r\nMtV+zLdxIjTM1l8MuABMJ6HFP3rSIol0ADQSR4Vsz/idVo/b1aPbUitcBqXn\r\n12O+O3dnIJYfUVuzvi//aE4GvrfXdPqDTiyyyqmSzXchPcSR5LSJdGe1ElXg\r\nwdqZJQPAAfVOZX6Vot2nXzDV0baZNGNk2Yh2XaZ5XAhqL75rleSa3OK4nm7b\r\nbaC4r+3/RfgaCnze8Ux4fnjHg7uuRUDU8evQElIEjTHsw03+RkMAapT3p2c6\r\n+p4RZN1gfiVbKHGAtMvYOD47QwvR81OVVmw=\r\n=8pa3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ayan4m1","email":"andrew@bulletlogic.com"},"directories":{},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-remark-classes_1.0.4_1679174595108_0.010259754379365438"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-18T21:23:15.015Z","1.0.4":"2023-03-18T21:23:15.294Z","modified":"2023-03-18T21:23:15.474Z"},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"description":"Automatically add class attributes to rendered markdown elements","homepage":"https://github.com/bulletlogic/gatsby-remark-classes#readme","keywords":["gatsby","gatsby-plugin"],"repository":{"type":"git","url":"git+https://github.com/bulletlogic/gatsby-remark-classes.git"},"author":{"name":"Chris Greindl","email":"chris.greindl@gmail.com"},"bugs":{"url":"https://github.com/bulletlogic/gatsby-remark-classes/issues"},"license":"MIT","readme":"# gatsby-remark-classes\n\nAutomatically add class attributes to markdown elements.\n\nThis is a plugin for [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=gatsby-transformer-remark).\n\n## Install\n\n```\nnpm install --save gatsby-remark-classes\n```\n\n## Configure\n\nIn your `gatsby-config.js`:\n\n```js\n{\n resolve: `gatsby-transformer-remark`,\n options: {\n plugins: [\n {\n resolve: `gatsby-remark-classes`,\n options: {\n classMap: {\n \"heading[depth=1]\": \"title\",\n \"heading[depth=2]\": \"subtitle\",\n paragraph: \"para\",\n }\n }\n }\n ]\n }\n}\n```\n\nThe rules above applied to the following markdown\n\n```markdown\n# Main heading\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio.\n\n## Sub header\n\nLorem ipsum dolor sit amet, consectetur adipisicing.\n```\n\nWill result in this HTML output:\n\n```html\n

Main heading

\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio.\n

\n\n

Sub header

\n

Lorem ipsum dolor sit amet, consectetur adipisicing.

\n```\n\n## The classMap\n\nFor supported selectors please please consult [syntax-tree/mdast](https://github.com/syntax-tree/mdast#nodes) for the node list and have a look at the [Support section of unist-util-select](https://github.com/syntax-tree/unist-util-select#support)\n\n## Motivation\n\nApplying custom styles is also possible by just wrapping your converted markdown in a parent element and write the styles for that. This will however not work if you use atomic css in your project or a framework like Semantic UI or Tailwind CSS.\n\nWith this project you define which classes get assigned to which element.\n\n## Upgrade guide\n\nWhen upgrading from version 0.x.x to 1.x.x, you will have to update the selectors in your `gatsby-config.js` file.\n\nSome common selectors:\n\n- `h1` is now `heading[depth=1]`\n- `h2` is now `heading[depth=2]`\n- `ul` is now `list[ordered=false]`\n- `ol` is now `list[ordered=true]`\n- `li` is now `listItem`\n- `paragraph` is still `paragraph`\n\nAdditionally you have now the chance to target child elements `code > pre` or even adjacent elements `paragraph + paragraph`. As stated above, please consult [syntax-tree/mdast](https://github.com/syntax-tree/mdast#nodes) for the node list and [syntax-tree/unist-util-select](https://github.com/syntax-tree/unist-util-select#support) for pseudo selectors and syntax.\n","readmeFilename":"README.md"}