{"id":22484105,"url":"https://github.com/soulshined/ft-syntax-highlight","last_synced_at":"2026-03-11T01:34:31.578Z","repository":{"id":54095257,"uuid":"111025030","full_name":"soulshined/ft-syntax-highlight","owner":"soulshined","description":"Pure CSS syntax highlighter, no Javascript required. Includes built-in tooltips with UI themes and syntax highlighting themes","archived":false,"fork":false,"pushed_at":"2018-07-21T03:03:50.000Z","size":1967,"stargazers_count":69,"open_issues_count":0,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T05:06:42.903Z","etag":null,"topics":["css","html","nojs","purecss","syntax-highlighting","themes","tooltips"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/soulshined.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":"2017-11-16T21:36:24.000Z","updated_at":"2024-04-14T08:00:55.000Z","dependencies_parsed_at":"2022-08-13T06:40:46.947Z","dependency_job_id":null,"html_url":"https://github.com/soulshined/ft-syntax-highlight","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulshined%2Fft-syntax-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulshined%2Fft-syntax-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulshined%2Fft-syntax-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulshined%2Fft-syntax-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soulshined","download_url":"https://codeload.github.com/soulshined/ft-syntax-highlight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499948,"owners_count":17929978,"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":["css","html","nojs","purecss","syntax-highlighting","themes","tooltips"],"created_at":"2024-12-06T17:10:18.431Z","updated_at":"2026-03-11T01:34:31.544Z","avatar_url":"https://github.com/soulshined.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# ft-syntax-highlight\nA lightweight, **pure CSS** syntax-highlighter; no Javascript required. A syntax-highlighter with 8 custom built-in UI themes like dark, light, simple, burberry, midnight, bootstrap and more! Common-sense tagging, line numbers and custom, pure CSS tooltips for identifying elements! Supports all major browsers and HTML versions. Made specifically for those pure CSSers like me!\n\n![demo](misc/ft-syntax-highlighter-demo.gif)\n\n# Table of Contents:\n\n| Point of Interest | Description |\n| ---| ---|\n| [Getting Started](#getting-started) | How to link to project \u0026 recommended usage |\n| [About](#about) | Review the mission of this project \u0026 learn about the benefits of a pure CSS syntax highlighter over automated counterparts |\n| [Understanding Selectors](#understanding-selectors) | Overview of why the tagging system is structured as it stands \u0026 best practices |\n| [Support](#support) | Detail overview of supported languages, features, UI themes, syntax themes and browsers |\n| [Road Map](#road-map) | Outlined vision and plans for future languages |\n| [Technical Specs](#technical-specs) | Any relevant under-the-hood stuff; font used, fallbacks etc |\n| [License](#license) | |\n| [Links](#links) | Links to non-project related resources |\n\n## Getting Started\n[[top]](#table-of-contents)\n\n#### Disclaimer:\n\u003eDue to the nature of this libraries scalable potential, the .css files structure is explicitly focused on organization, not so much on short-hand practices. Therefore, you will see, in most cases, selectors are not compounded, but individually styled based on its respective language.\n\nThe bare minimum for using ft-syntax-highlighter on a web page is linking to the library and adding a class selector to your ```\u003cpre\u003e``` tag:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/ft-syntax-highlight.css\"\u003e\n```\nWe recommend downloading the file and placing it in your projects directory for offline use or otherwise.\n\n**Linking to GitHub path directly.** Because of the nature of the project, the library is supported to work straight\nfrom the source. However, we assume you understand the risks of using this method provided source code changes or files are altered without notice.\n\nAfter you've added the class to your ```\u003cpre\u003e``` tag you must identify the syntax using our `data` attributes for respective supported languages:\n\n```html\n\u003cpre class=\"ft-syntax-highlight\" data-syntax=\"html\" ... \u003e\n  \u003ccode\u003e\n  ...\n```\nThis will initiate proper tooltips for the respective selection. \n\nFor syntax highlighting, you can pick from any of the syntax highlighting themes:\n```html\n\u003cpre class=\"ft-syntax-highlight\" data-syntax=\"html\" data-syntax-theme=\"one-dark\"\u003e\n  \u003ccode\u003e\n  ...\n```\nPlease note, that highlighting **ONLY** occurs in the `code` tag and there is **NO** default. \n\nYou can also specify a UI theme if you don't want the default dark theme.\n\n**Example**\n\n```html\n\u003cpre class=\"ft-syntax-highlight\" data-syntax=\"html\" data-syntax-theme=\"one-dark\"\u003e\n  \u003ccode\u003e\n  \u003cspan class=\"comment\"\u003e\u0026lt;!-- This is a single line HTML comment --\u0026gt;\u003c/span\u003e\n  \u003c/code\u003e\n\u003c/pre\u003e\n```\n\nIt is **highly recommended** you don't nest `\u003cpre class=\"ft-syntax-highlight\u003e` tags. We can't foreshadow all use-cases, but we did a simple validation to attempt in eliminating this practice.\n\nThe list of supported languages can be found [below](#support)\n\n## About \n[[top]](#table-of-contents)\n\nThis project is simply targeted to those hard-core pure CSSers like me!\n\nThe goal of this library is to provide a Javascript-independent syntax-highlighter with common-sense tagging. This library will always be Javascript-independent! \n\n**Why pure CSS syntax-highlighter? Won't that create more work for me than necessary?**\nIndeed, although a pure CSS syntax-highlighter would mean a little more busy-work on your end as a developer, we can guarantee all users get the best experience, even if only 2% of internet users have Javascript disabled.\n\nEssentially, this library focuses on [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) and it's our mission to not discriminate against disablers, but support all users.\n\nWe encourage users to build Javascript integration if it fits within the scope of their needs, however, this specific library will always be Javascript-independent. \n\n## Understanding Selectors\n[[top]](#table-of-contents)\n\n`\u003cpre\u003e` tag attributes:\n- `data-syntax`       : defines the langauge tooltip and UI title | no default | accepts any supported language\n- `data-syntax-theme` : defines the syntax highlighting theme | defaults to UI themes color | list can be found [here](examples#syntax-themes)\n- `data-ui-theme`     : (optional) changes the UI of the `pre` tag | defaults to \"dark\" | list can be found [here](examples#ui-themes)\n- `data-showTooltips` : (optional) display tooltips on hover | defaults to false | accepts \"true\"\n\nUsage:\n`\u003cpre class=\"ft-syntax-highlight\" data-syntax=\"css\" data-syntax-theme=\"one-light\" data-showTooltips=\"true\"\u003e...\u003c/pre\u003e`\n\n**BASICS**\n\nWhat we mean by 'common-sense' tagging is simply put, keeping things as natural as possible. The end goal is to isolate elements on a per-language basis, while somehow trying to make all other languages tagging familiar so you’re not learning 20,000 different classes/tags. \n\nFor example, considering XML is a low-level language, it's elements are broken down simply to elements, attributes, attribute values, namespaces and comments. Those are exactly what we use for tags in this scenario.\n\nHowever, consider Javascript as a higher-level language, there are multiple elements that could define an 'element' or 'variable' or 'selector'. We specifically oversimply the lingo in this regard so we aren't coding for astronomical amounts of identifiers. Variables, functions as variables, local variables etc. can all be targeted with a `\u003cspan class=\"identifier\"\u003e` tab. And the same is true for jQuery, and PHP. \n\nAlthough, we do specifically target identifiers like a Class, or UDF. These will still have an identifier prefix, but followed by a specific name: `\u003cspan class=\"identifier-class\"\u003e...\u003c/span\u003e` || `\u003cspan class=\"identifier-constant\"\u003e...\u003c/span\u003e`\n\n**BEST PRACTICES**\n- `\u003cspan class=\"value\"\u003e` should be reserved for when you reference an attribute's value for any language, not for things such as text. For example: `\u003cdiv style=\"value\"\u003e... || \u003cdiv style=\"color: blue\"\u003e...` the value for the style attribute is considered good practice for this tag.\n- `\u003cspan class=\"keyword\"\u003e` should be reserved for ALL languages' reserved words. (Things like `else`, `if`, `then`, `do`, `until`, `while`, `not`, `return` etc.). Each language has a predefined list of reserved words. This is considered good practice for this tag and works with all languages using ft-syntax-highlighter.css\n- `\u003cspan class=\"newline\"\u003e` It's important to stress the value of this tag. Users could argue that they simply could type in the line number instead of using a dedicated `\u003cspan\u003e` tag. However, for the users that aren't aware, `::before` and `::after` pseudo classes don't allow user selection. In other words, when viewers go to your website then copy and paste code in the `\u003cpre\u003e` tag, the line numbers will not be included in the copied text due to being `::before` content. This is important when maintaining a 'pure CSS' solution. Additionally, because whitespace is preserved, it's recommended to use this tag inline with the left side of the `\u003ccode\u003e` tag. :\n```html\n  \u003cpre class=\"ft-syntax-hightlight\" data-syntax=\"html\" ...\u003e\n    \u003ccode\u003e\n    \u003cspan class=\"newline\"\u003e\u003c/span\u003e\n    ...\n```\n- `\u003cspan class=\"unit\"\u003e` should be reserved for any case where a unit of measure, time, numeric value, temperature etc are defined\n- `\u003cspan class=\"identifier-native\u003e` should be reserved for functions, tags or class methods, and select few other things, that are native to the programming language. For Javascript an example would be `isNaN()` and `match()`\n- `\u003cspan class=\"typecast\"\u003e` should be reserved for syntax explicitly typecasting an identifier. For example, in PHP:\n```html\n  ...\n  \u003cspan class=\"typecast\"\u003e(int)\u003c/span\u003e\u003cspan class=\"identifier\"\u003e$someNumberAsString\u003c/span\u003e\n  ...\n```\n- `\u003cspan class=\"variable\"\u003e` should be reserved for higher level languages, when defining a local variable for example. This is usually only helpful for tooltips as we have not set any color or highlighting attributes to it.\n\nOf course, all this is arbitrary, and ultimately at your discretion. However, this is where our vision aligns with HTML5 custom elements when it's fully supported. Which is why we recommend these best practices if you plan on utilizing this library in the future.\n\nSupported tags for each specific language can be found [here](#support)\n\nIf you have any recommendations or feedback on tagging conventions, know they are welcomed. It's my desire to make this library as fluid and well-received as possible.\n\n## Support\n[[top]](#table-of-contents)\n\n**FEATURES**\n- Common sense tagging (`\u003cspan class=\"selector\"\u003e` || `\u003cspan class=\"comment\"\u003e` || `\u003cspan class=\"boolean\"\u003e\u003c/span\u003e`)\n- Built in line-number option using pseudo-classes.\n- Pure CSS tooltips for identifying elements (great for educational purposes)\n- Built in syntax \u0026 UI themes. Choose a theme to match or professionally contrast your design needs.\n\n**THEMES**\nSee a complete list of out-of-the-box themes [here](examples#ui-themes)\n\n**LANGUAGES** \n\n  - HTML [[Supported Tags]](examples/html#supported-tags) [[Examples]](examples/html#examples)\n  - CSS [[Supported Tags]](examples/css#supported-tags) [[Examples]](examples/css#examples)\n  - XML [[Supported Tags]](examples/xml#supported-tags) [[Examples]](examples/xml#examples)\n  - Javascript [[Supported Tags]](examples/javascript#supported-tags) [[Examples]](examples/javascript#examples)\n  - jQuery [[Supported Tags]](examples/jquery#supported-tags) [[Examples]](examples/jquery#examples)\n  - PHP [[Supported Tags]](examples/php#supported-tags) [[Examples]](examples/php#examples)\n  - Python [[Supported Tags]](examples/python#supported-tags) [[Examples]](examples/python#examples)\n  - VB [[Supported Tags]](examples/vb#supported-tags) [[Examples]](examples/vb#examples)\n    \n**BROWSERS**\nSupports all major browsers with vendor specific prefixes, Internet Explorer 9+. However, some browsers don't support some features, functions or properties. Additionally, things like scrollbar styling and repeated linear gradients may look different on some browsers. As always, test accordingly.\n\n## Road Map\n[[top]](#table-of-contents)\n\nThe ultimate goal of this project is to simplify tagging and categorizing syntax. Once all major browsers support creating custom HTML5 elements, we will transition to that specific markup. \n\nThis example:\n```html\n\u003cpre class=\"ft-syntax-highlight\" data-syntax=\"html\" data-syntax-theme=\"one-light\" data-ui-theme=\"bootstrap4\"\u003e\n  \u003ccode\u003e\n  \u003cspan class=\"newline\"\u003e\u003c/span\u003e \n  \u003cspan class=\"newline\"\u003e \u0026lt;\u003cspan class=\"selector\"\u003enoscript\u003c/span\u003e\u0026gt; \u003c/span\u003e\n  \u003cspan class=\"newline\"\u003e   \u003cspan class=\"comment\"\u003e\u0026lt;!-- Anything in this div will only be displayed if js is disabled --\u0026gt;\u003c/span\u003e \u003c/span\u003e\n  \u003cspan class=\"newline\"\u003e \u0026lt;\u003cspan class=\"selector\"\u003e/noscript\u003c/span\u003e\u0026gt; \u003c/span\u003e\n  \u003cspan class=\"newline\"\u003e\u003c/span\u003e\n  \u003c/code\u003e\n\u003c/pre\u003e\n```\nWould end up looking something like this:\n```html\n\u003cft-syntax-highlight syntax=\"html\" syntax-theme=\"one-light\" ui-theme=\"bootstrap4\"\u003e\n  \u003ccode\u003e\n  \u003cnewline\u003e\u003c/newline\u003e \n  \u003cnewline\u003e  \u0026lt;\u003cselector\u003enoscript\u003c/selector\u003e\u0026gt; \u003c/newline\u003e\n  \u003cnewline\u003e    \u003ccomment\u003e\u0026lt;!-- Anything in this div will only be displayed if js is disabled --\u0026gt;\u003c/comment\u003e \u003c/newline\u003e\n  \u003cnewline\u003e  \u0026lt;\u003cselector\u003e/noscript\u003c/selector\u003e\u0026gt; \u003c/newline\u003e\n  \u003cnewline\u003e\u003c/newline\u003e \n  \u003c/code\u003e\n\u003c/ft-syntax-highlight\u003e\n```\nWe feel this will improve readability as well as _drastically_ reduce the amount of typing necessary. Of course, all custom element names will not conflict with reserved words for any language\n\nYou can follow the custom element browser compatibility here: \u003ca href=\"https://caniuse.com/#search=custom%20elements\" target=\"_blank\"\u003ehttps://caniuse.com/#search=custom%20elements\u003c/a\u003e\n\nMost Road Map agenda is focused on customized styling or markup, or adding more UI themes\n\n**Languages \u0026 Themes**\nLanguages and themes will be added for as long as this project is not deprecated\n\n## Technical Specs\n[[top]](#table-of-contents)\n\n- `@media` query breakpoints:\n  - There is only one breakpoint taken into consideration (max-width: 550px) All view widths below that, the font size adjusts accordingly. We use calc() to ensure a minimum font-size of 8px is honored.\n    - Safari \u0026 iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().\n    - IE11 is reported to not support calc() correctly in generated content\n    - IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently)\n    - IE10 crashes when a div with a property using calc() has a child with same property with inherit.\n \n- font\n  - Font family is a google font 'Source Code Pro', no fallback, just monospace\n  - Some websafe fonts used for UI purposes, no additional HTTP requests needed for these\n \n- Content overflow: overflow-y is set to auto for the `ft-syntax-highlight` class. Any `\u003cpre\u003e` tag \u003e= 400px will be y-scrollable automatically\n\n- Data attribute/value structure\n  - Case insensitive. `\u003cdata-syntax=\"html\"\u003e` works the same as `\u003cdata-syntax=\"HTML\"\u003e`\n\n- Overriding defaults\n  - There are lots of customized properties using this class. Padding to support optional line numbers for example, scrollbar styling etc. Please refer to the code for styling.\n  \n## License\n[[top]](#table-of-contents)\n\nft-syntax-highlighter.css is released under the MIT License. See [LICENSE][1] file\nfor details.\n\n## Links\n[[top]](#table-of-contents)\n\nAuthors and contributors are listed in the [authors.txt][2] file.\n\n[1]: https://github.com/soulshined/ft-syntax-highlighter/blob/master/LICENSE\n[2]: https://github.com/soulshined/ft-syntax-highlighter/blob/master/authors.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoulshined%2Fft-syntax-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoulshined%2Fft-syntax-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoulshined%2Fft-syntax-highlight/lists"}