add plugin custom class name #950

thien-do · 2016-05-06T14:23:47Z

This plugin allows to replace Prism default class names (like .comment, .string, .property, etc) with your defined ones (like .editor__comment (BEM style) or ._7sh3a (CSS Modules hashed class)).

For more information, please see the plugin page: http://quoinex.github.io/prism/plugins/custom-class-name/

Issue: #947

thien-do · 2016-05-06T14:26:27Z

@LeaVerou @zeitgeist87 I have some time to write the plugin as discussed previously with you two. Please take a look at it.

I also have one problem here: I create several separate files in my plugins folder to demo how this plugin works, but it seems that make uglify failed to run. Do you have any advice to fix this pull request?

zeitgeist87 · 2016-06-03T08:21:38Z

Sorry for the late response. I was quite busy last month. Looking over your source code I had the following idea. Your plugin could also offer the option of a prefix to all classes. Something like a namespace:

Prism.plugins.customClassName.prefix("mynamespace-");

That way the user would not have to provide a map for every possible class. You can of course still support the map. What do you think?

thien-do · 2016-06-03T10:04:52Z

Oh right, I should have that. Actually that is my first solution when trying to isolate Prism's class (before I meet CSS Modules)

zeitgeist87 · 2016-06-04T09:52:24Z

Your example JavaScript files like example-2.js cause the minifier to crash. You cannot have any extra *.js files in that directory.

Also your examples are very small. It is probably best if you include them inline in index.html.

zeitgeist87 · 2016-06-04T10:06:43Z

plugins/custom-class-name/prism-custom-class-name.js

+if (
+	typeof self !== 'undefined' && !self.Prism ||
+	typeof global !== 'undefined' && !global.Prism
+) {


I think you have this wrong. What if both self and global are undefined? How about this:

(typeof self === 'undefined' || !self.Prism) && (typeof global === 'undefined' || !global.Prism)

zeitgeist87 · 2016-06-04T10:17:01Z

Your plugin currently only maps a single token type to a single class, which is a bit limiting. Prism supports aliases, so env.classes could look like this:

env.classes = ['token', 'equation', 'string', 'important'];

Wouldn't it be better to map classes to classes?

env.classes = env.classes.map(function(c){
    return classMap[c] || c;
});

LeaVerou · 2016-06-07T14:01:32Z

Sorry for the late response. I was quite busy last month. Looking over your source code I had the following idea. Your plugin could also offer the option of a prefix to all classes. Something like a namespace:
Prism.plugins.customClassName.prefix("mynamespace-");
That way the user would not have to provide a map for every possible class. You can of course still support the map. What do you think?

Accepting a function as a parameter that takes a class and returns the namespaced class would also be good for maximum customization (though I'm a bit worried it might be going towards feature creep :P)

LeaVerou · 2016-06-07T14:01:58Z

Also, customClass would be a better I think, customClassName is a bit too verbose.

…ages

thien-do · 2016-08-14T19:48:34Z

Hi @zeitgeist87 and @LeaVerou , I'm very sorry for the late response. I finally have time to enhance the pull request as your suggestions. Please take a look and tell me anything that I need to fix.

Summary changes:

Rename customClassName to customClass (add plugin custom class name #950 (comment))
Inline example code (add plugin custom class name #950 (comment))
Support prefix namespace (add plugin custom class name #950 (comment))
Map classes to classes (instead of single class) (add plugin custom class name #950 (comment))
Update docs (docs for prefix feature, add “Motivation”, simplify examples)

thien-do · 2016-09-27T09:02:11Z

Hi @Golmote , would you mind taking a look at this? It seems @zeitgeist87 and @LeaVerou don't have time for this :(

Golmote · 2016-09-27T23:09:12Z

@dvkndn I only had time to look through the code right now. It looks quite good to me. I'll find a moment this week to actually test your plugin.

I think I spotted some grammar errors in your plugin HTML page. I'm not an native English speaker myself, though, so I'm not really the best candidate to help fixing this.

Golmote

This is the best I can do to help address this grammar issue ;)

Golmote · 2016-09-27T23:10:37Z

plugins/custom-class/index.html

+<section>
+	<h1>Motivation</h1>
+
+	<p>Prism default classes are sensible but fixed and too generic. This plugin provide some ways to customize those classes to suite your needs. Example usages:</p>


Shouldn't it be "suit" instead of "suite"?

Golmote · 2016-09-27T23:11:03Z

plugins/custom-class/index.html

+
+	<ul>
+		<li>
+			 You want to add namespace for all of them (like <code>.prism--comment</code>) to avoid conflict with your existed classes.


I should be "existing" instead of "existed".

Golmote · 2016-09-27T23:13:09Z

plugins/custom-class/index.html

+	comment: 'comment_93jsa'
+})</code></pre>
+
+	<p>Object's keys are the tokens you want to replace (eg: <code>comment</code>), with its value is the classes you want to use (eg: <code>my-comment</code>). Tokens which are not specified will stay the same.</p>


"with its value is the" should probably be replaced with something like... "with their values being the", I guess...

Golmote · 2016-09-27T23:13:48Z

plugins/custom-class/index.html

+
+		<h2>CSS Modules Usage:</h2>
+
+		<p>The initial purpose of this plugin is to use with CSS Modules. It works perfectly with the class map object returned by CSS Modules. For example:</p>


"is to use" should probably be replaced by "is to be used".

thien-do · 2016-09-28T08:08:22Z

Thank you @Golmote :D I fixed those grammar errors as you spotted. Sorry for my bad English :(

Golmote · 2016-09-30T06:40:24Z

Ok, it looks good to me.

One last thing... why is components/prism-markup.min.js listed in the changed file? Can you revert the changes on this file?

thien-do · 2016-09-30T07:53:16Z

Sure I reverted the file. That is an accident, sorry

Golmote · 2016-09-30T17:53:14Z

Great! Merging, then!

jGleitz · 2016-10-16T21:13:03Z

Why was this meged into gh-pages? Will it be merged into master and published to npm any time soon?

Golmote · 2016-10-16T21:24:07Z

Because everything is merged to gh-pages first. I'll try to make a release on master this month if nobody does it before.

jGleitz · 2016-10-16T21:25:51Z

I see. Thanks!

add plugin custom class name

863f5f1

zeitgeist87 mentioned this pull request Jun 3, 2016

Name-space classes #962

Closed

zeitgeist87 reviewed Jun 4, 2016
View reviewed changes

dvkndn added 3 commits August 14, 2016 22:53

Merge branch 'gh-pages' of https://github.com/PrismJS/prism into gh-p…

820c7b7

…ages

add prefix feature for custom class plugin

e9355cc

update min file and reverse core

cda106f

Golmote reviewed Sep 27, 2016

View reviewed changes

Fix grammar in Readme

fa68f91

Reverse prism markup min

4cbdf4d

Golmote merged commit a0bd686 into PrismJS:gh-pages Sep 30, 2016

Golmote mentioned this pull request Mar 29, 2017

Plugin to use custom class name #947

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add plugin custom class name #950

add plugin custom class name #950

thien-do commented May 6, 2016

thien-do commented May 6, 2016

zeitgeist87 commented Jun 3, 2016

thien-do commented Jun 3, 2016

zeitgeist87 commented Jun 4, 2016

zeitgeist87 Jun 4, 2016

zeitgeist87 commented Jun 4, 2016

LeaVerou commented Jun 7, 2016

LeaVerou commented Jun 7, 2016

thien-do commented Aug 14, 2016 •

edited

Loading

thien-do commented Sep 27, 2016

Golmote commented Sep 27, 2016

Golmote left a comment

Golmote Sep 27, 2016

Golmote Sep 27, 2016 •

edited

Loading

Golmote Sep 27, 2016

Golmote Sep 27, 2016

thien-do commented Sep 28, 2016

Golmote commented Sep 30, 2016

thien-do commented Sep 30, 2016

Golmote commented Sep 30, 2016

jGleitz commented Oct 16, 2016

Golmote commented Oct 16, 2016

jGleitz commented Oct 16, 2016


		<h2>CSS Modules Usage:</h2>

		<p>The initial purpose of this plugin is to use with CSS Modules. It works perfectly with the class map object returned by CSS Modules. For example:</p>

add plugin custom class name #950

add plugin custom class name #950

Conversation

thien-do commented May 6, 2016

thien-do commented May 6, 2016

zeitgeist87 commented Jun 3, 2016

thien-do commented Jun 3, 2016

zeitgeist87 commented Jun 4, 2016

zeitgeist87 Jun 4, 2016

Choose a reason for hiding this comment

zeitgeist87 commented Jun 4, 2016

LeaVerou commented Jun 7, 2016

LeaVerou commented Jun 7, 2016

thien-do commented Aug 14, 2016 • edited Loading

thien-do commented Sep 27, 2016

Golmote commented Sep 27, 2016

Golmote left a comment

Choose a reason for hiding this comment

Golmote Sep 27, 2016

Choose a reason for hiding this comment

Golmote Sep 27, 2016 • edited Loading

Choose a reason for hiding this comment

Golmote Sep 27, 2016

Choose a reason for hiding this comment

Golmote Sep 27, 2016

Choose a reason for hiding this comment

thien-do commented Sep 28, 2016

Golmote commented Sep 30, 2016

thien-do commented Sep 30, 2016

Golmote commented Sep 30, 2016

jGleitz commented Oct 16, 2016

Golmote commented Oct 16, 2016

jGleitz commented Oct 16, 2016

thien-do commented Aug 14, 2016 •

edited

Loading

Golmote Sep 27, 2016 •

edited

Loading