Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS: Highlight attribute selector #1671

Merged

Conversation

RunDevelopment
Copy link
Member

This PR adds additional highlighting for attribute selectors.

Spec: CSS 3, CSS 4

Example

image

@RunDevelopment
Copy link
Member Author

Are you ok with this @LeaVerou ? I'm asking because of your comment here.
(Same for #1650)

@LeaVerou
Copy link
Member

LeaVerou commented Mar 4, 2019

If the others are ok with it!

@RunDevelopment
Copy link
Member Author

Since people seem to be interested in this feature, I'm going to merge this if @mAAdhaTTah gives his OK.

@mAAdhaTTah
Copy link
Member

LGTM!

@RunDevelopment RunDevelopment merged commit 245b59d into PrismJS:master Mar 4, 2019
@RunDevelopment RunDevelopment deleted the css-attribute-selector branch March 4, 2019 21:17
@atomiks
Copy link

atomiks commented Mar 5, 2019

How do I use CSS extras? Is it documented somewhere?

@RunDevelopment
Copy link
Member Author

You load both languages and CSS Extras will add new features to CSS, so you just use the normal language-css class.

@atomiks
Copy link

atomiks commented Mar 5, 2019

I'm using a plugin for this which indirectly loads them for me, is the name language-css-extras?

@RunDevelopment
Copy link
Member Author

RunDevelopment commented Mar 5, 2019

Are you using the Autoloader?

is the name language-css-extras?

It's css-extras, yes but there is no language.

@atomiks
Copy link

atomiks commented Mar 5, 2019

It's a gatsby plugin, here's the source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/load-prism-language.js

I could just do some filesystem monkey-patching which I'm already doing elsewhere, to manually add the extras to the CSS file 🤔

@RunDevelopment
Copy link
Member Author

That seems to be a problem with the library. Seems like they don't support loading language extensions.
It would probably be best to open an issue over there.

schalkneethling pushed a commit to mdn/kuma that referenced this pull request Mar 27, 2019
Resolves [bug 1538693](https://bugzilla.mozilla.org/show_bug.cgi?id=1538693).

<!--
# ------------------------ >8 ------------------------
Remove everything below this line from the commit message
-->

<details><summary>
<h2>Kuma affecting changes:</h2>
<table><td>
📝 <strong>Note:</strong> See <a href="https://github.com/PrismJS/prism/releases/tag/v1.16.0">PrismJS/prism@v1.16.0</a> for a full list of changes.
</td></table></summary>

### Updated components

* __C__
	* Improve C language (PrismJS/prism#1697) PrismJS/prism@7eccea5c
* __C-like__
	* Simplify function pattern of C-like language (PrismJS/prism#1552) PrismJS/prism@b520e1b6
* __C/C++/Java__
	* Operator fixes (PrismJS/prism#1528) PrismJS/prism@7af8f8be
* __CSS__
	* Fix tokenizing !important (PrismJS/prism#1585) PrismJS/prism@c1d6cb85
	* Added the comma to the list of CSS punctuation PrismJS/prism@7ea2ff28
	* CSS: Comma punctuation (PrismJS/prism#1632) PrismJS/prism@1b812386
	* Reuse CSS selector pattern in CSS Extras (PrismJS/prism#1637) PrismJS/prism@e2f2fd19
	* Fixed CSS extra variable (PrismJS/prism#1649) PrismJS/prism@9de47d3a
	* Identify CSS units and variables (PrismJS/prism#1450) PrismJS/prism@5fcee966
	* Allow multiline CSS at-rules (PrismJS/prism#1676) PrismJS/prism@4f6f3c7d
	* CSS: Highlight attribute selector (PrismJS/prism#1671) PrismJS/prism@245b59d4
	* CSS: Selectors can contain any string (PrismJS/prism#1638) PrismJS/prism@a2d445d0
	* CSS extras: Highlighting for pseudo class arguments (PrismJS/prism#1650) PrismJS/prism@70a40414
* __Java__
	* Add Java 10 support (PrismJS/prism#1549) PrismJS/prism@8c981a22
	* Added module keywords to Java. (PrismJS/prism#1655) PrismJS/prism@6e250a5f
	* Improve Java (PrismJS/prism#1474) PrismJS/prism@81bd8f0b
* __JavaScript__
	* Fix regex for `catch` and `finally` (PrismJS/prism#1527) PrismJS/prism@ebd1b9a6
	* Highlighting of supposed classes and functions (PrismJS/prism#1482) PrismJS/prism@c40f6047
	* Added support for JS BigInt literals (PrismJS/prism#1542) PrismJS/prism@2b62e57b
	* Fixed lowercase supposed class names (PrismJS/prism#1544) PrismJS/prism@a47c05ad
	* Fixes regex for JS examples (PrismJS/prism#1591) PrismJS/prism@b41fb8f1
	* Improve regex detection in JS (PrismJS/prism#1473) PrismJS/prism@2a4758ab
	* Identify JavaScript function parameters (PrismJS/prism#1446) PrismJS/prism@0cc8c56a
	* Improved JavaScript parameter recognization (PrismJS/prism#1722) PrismJS/prism@57a92035
	* Make `undefined` a keyword in JS (PrismJS/prism#1740) PrismJS/prism@d9fa29a8
	* Fix `function-variable` in JS (PrismJS/prism#1739) PrismJS/prism@bfbea4d6
	* Improved JS constant pattern (PrismJS/prism#1737) PrismJS/prism@7bcec584
	* Improved JS function pattern (PrismJS/prism#1736) PrismJS/prism@8378ac83
	* JS: Fixed variables named "async" (PrismJS/prism#1738) PrismJS/prism@3560c643
	* JS: Keyword fix (PrismJS/prism#1808) PrismJS/prism@f2d8e1c7
* __JSON__ / __JSONP__
	* Fix bugs in JSON language (PrismJS/prism#1479) PrismJS/prism@74fe81c6
	* Adds support for comments in JSON (PrismJS/prism#1595) PrismJS/prism@8720b3e6
	* Cleaned up JSON (PrismJS/prism#1596) PrismJS/prism@da474c77
	* Added `keyword` alias to JSON's `null` (PrismJS/prism#1733) PrismJS/prism@eee06649
	* Fix JSONP support (PrismJS/prism#1745) PrismJS/prism@b5041cf9
	* Fixed JSON/JSONP examples (PrismJS/prism#1765) PrismJS/prism@ae4842db
* __Markup__
	* Decouple XML from Markup (PrismJS/prism#1603) PrismJS/prism@0030a4ef
	* Fix for markup attributes (PrismJS/prism#1752) PrismJS/prism@c3862a24
	* Markup: Added support for CSS and JS inside of CDATAs (PrismJS/prism#1660) PrismJS/prism@57127701
	* Markup `addInline` improvements (PrismJS/prism#1798) PrismJS/prism@af67c32e
* __Rust__
	* Add missing keywords (PrismJS/prism#1634) PrismJS/prism@3590edde

### Updated plugins

* Better class name detection for plugins (PrismJS/prism#1772) PrismJS/prism@c9762c6f
* __Line Numbers__
	* Added inheritance for the `line-numbers` class (PrismJS/prism#1799) PrismJS/prism@14be7489

### Other changes

* __Core__
	* `insertBefore` now correctly updates references (PrismJS/prism#1531) PrismJS/prism@9dfec340
	* Invoke `callback` after `after-highlight` hook (PrismJS/prism#1588) PrismJS/prism@bfbe4464
	* Improve `Prism.util.type` performance (PrismJS/prism#1545) PrismJS/prism@2864fe24
	* Remove unused `insertBefore` overload (PrismJS/prism#1631) PrismJS/prism@39686e12
	* Ignore duplicates in insertBefore (PrismJS/prism#1628) PrismJS/prism@d33d259c
	* Remove the Prism.tokenize language parameter (PrismJS/prism#1654) PrismJS/prism@fbf0b094
	* Call `insert-before` hook properly (PrismJS/prism#1709) PrismJS/prism@393ab164
	* Improved languages.DFS and util.clone (PrismJS/prism#1506) PrismJS/prism@152a68ef
	* Core: Avoid redeclaring variables in util.clone (PrismJS/prism#1778) PrismJS/prism@b06f532f
	* Made prism-core a little more editor friendly (PrismJS/prism#1776) PrismJS/prism@bac09f0a
	* Applied Array.isArray (PrismJS/prism#1804) PrismJS/prism@11d0f75e

</details>

---

review?(@jwhitlock)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants