# Dropcaps in Discourse - cannot override span tag
**URL:** https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477
**Category:** UX
**Created:** [20 juli 2017 om 00:29 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477 "2017-07-20T00:29:23Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@norandom](https://meta.discourse.org/u/norandom)
#### Post date: [20 juli 2017 om 00:29 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/1 "2017-07-20T00:29:23Z")
Hi,
I have a short question.
I added a CSS class to my theme.
```
.dropcap {
font-size: 300% !important;
width: 0.7em !important;
line-height: 80% !important;
float: left !important;
color: #808080 !important;
}
```
Usually instead of `.dropcap` I would have used `span`. For Discourse that’s not a good idea. The CSS theme editor doesn’t like you to mess with span due to the syntax highlighting.
`I` can use Dropcaps. Not.
The class isn’t usable…
I have stuff in my CSS like
```
.topic-body{
min-width: 65%;
}
```
Works. But I cannot define new classes? Is there anything I am missing?
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [20 juli 2017 om 06:43 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/2 "2017-07-20T06:43:13Z")
Any css classes that you add to that html will be stripped by the Discourse markdown parser. If you need to you can whitelist css classes with a plugin.
---
### Author:  [@norandom](https://meta.discourse.org/u/norandom)
#### Post date: [20 juli 2017 om 08:42 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/3 "2017-07-20T08:42:22Z")
Hmh, I have been search the forum here and most people seem to have issues with doing that. Found very little boilerplate code I could re-use.
Let me see what I can do… if someone has a plugin that does something like this, I’d appreciate a link. I can modify it.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [20 juli 2017 om 08:48 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/4 "2017-07-20T08:48:24Z")
```js
(function() {
Discourse.Markdown.whiteListTag('span', 'class', 'dropcap');
})();
```
Try the simple JavaScrpit above. [example](https://github.com/scossar/discourse-image-tag-whitelist/blob/master/assets/javascripts/image-tag-whitelist.js)
---
### Author:  [@norandom](https://meta.discourse.org/u/norandom)
#### Post date: [20 juli 2017 om 08:54 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/5 "2017-07-20T08:54:15Z")
That helps a lot, thanks.
I just forked your repo and edited the JS:
[https://github.com/norandom/discourse-image-tag-whitelist/blob/master/assets/javascripts/image-tag-whitelist.js](https://github.com/norandom/discourse-image-tag-whitelist/blob/master/assets/javascripts/image-tag-whitelist.js)
Doesn’t work yet.
```
plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1 Uncaught TypeError: Cannot read property 'whiteListTag' of undefined
at plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1
at plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1
```
Not sure why. I rarely code JS. Tried an import (latest commit), but I highly doubt that I need that tbh..
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 juli 2017 om 10:30 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/6 "2017-07-20T10:30:26Z")
That isn’t how you do it. You now do the following:
[https://github.com/cpradio/discourse-plugin-checklist/blob/master/assets/javascripts/lib/discourse-markdown/checklist.js.es6#L102-L108](https://github.com/cpradio/discourse-plugin-checklist/blob/master/assets/javascripts/lib/discourse-markdown/checklist.js.es6#L102-L108)
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [20 juli 2017 om 10:33 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/7 "2017-07-20T10:33:41Z")
That repo was not mine. But it have no problems. Recently major change done in [markdown](https://meta.discourse.org/t/commonmark-testing-started-here/65121). I guess that’s causing the issue.
After some research I found currently Markdown whitelisting should be done in other way like below.
```js
import WhiteLister from 'pretty-text/white-lister';
export default {
name: 'dropcap',
initialize() {
const whiteLister = new WhiteLister();
whiteLister.whiteListFeature("dropcap", [
'span.dropcap'
]);
}
};
```
Above code should be placed in ember initializer. For that you should know [basic plugin development](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-1/30515).
Looks like @cpradio’s method is already working fine. So you can try it first.
---
### Author:  [@norandom](https://meta.discourse.org/u/norandom)
#### Post date: [20 juli 2017 om 12:41 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/8 "2017-07-20T12:41:06Z")
Hey,
I tried @cpradio 's solution.
Good news: it compiled. Nothing died.
Bad news: it doesn’t do anything.
[https://github.com/norandom/discourse-span-tag-whitelist/blob/master/assets/javascripts/span-tag-whitelist.js.es6](https://github.com/norandom/discourse-span-tag-whitelist/blob/master/assets/javascripts/span-tag-whitelist.js.es6)
Somehow I sense that this isn’t going to be that 5 minute job…
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 juli 2017 om 12:45 UTC](https://meta.discourse.org/t/dropcaps-in-discourse-cannot-override-span-tag/66477/9 "2017-07-20T12:45:45Z")
You are close, but that isn’t quite right.
First, the file path should be `assets/javascripts/lib/discourse-markdown/dropcaps.js.es6`
Next it needs to have the contents of
```plaintext
export function setup(helper) {
helper.registerOptions((opts, siteSettings)=>{
opts.features['dropcaps'] = true; //!!siteSettings.dropcaps_enabled;
});
helper.whiteList(['span.dropcaps', 'span.sclass']);
}
```