How to add a class attribute to a table created using markdown


#1

I understand that it is possible to create a table like this:

| Col A | Col B | Col C |
|---|---|---|

My question, how to add a custom class attribute to the table? I mean, rendering it in HTML as, for example:

<table class='shortcuts'>...</table>


(Jeff Atwood) #2

This is not possible at the current time. Allowing arbitrary html is a security risk.


#3

Alternatively, is it possible to wrap it in a <div> tag with a class attribute, is there any plugin to allow this?


(David Taylor) #4

[data-theme-*] attributes are whitelisted inside post content, so you can do

<div data-theme-shortcuts="true">

</div>

and then target it in CSS using something like

div[data-theme-shortcuts="true"] {

}

Originally discussed here:


#5

@David_Taylor Thank you very much!


(Sarah) #6

Hey Jeff,

I noticed in the /admin portal that moderators and admins have the same CSS classes (on the body and in the content).

I was hoping to add a class to the HTML body tag stating if a user is a moderator or an admin so that I could hide some functionality for moderators. I was following eviltrout’s comment Profile - eviltrout - Discourse Meta) Beginner’s Guide to Creating Discourse Plugins Part 2: Plugin Outlets

Does this mean that I cannot add additional classes to Discourse’s UI?


(cpradio) #7

If you are doing it via plugin you definitely can. Themes are a bit more limited.


(Sarah) #8

Really!?

I know how to add_to_class() in the plugin.rb file.

But how would I add a class to a .hbs file ?


(cpradio) #9

Generally you either reopen it’s controller which can define a class or if it truly is in the hbs, you can overwrite the hbs file by placing it is the same folder structure in your plugin. Just realize doing that means you have to maintain and copy changes that occur in that file in core.


(Sarah) #10

Hmm maybe its the .js.es6 file extension? To be honest, I have no idea how to go about this.

I’m hoping of a way to distinguishing between mods and admins in the admin portal by adding a class somewhere in the DOM (preferably on the admin-wrapper or body). So that I can trigger a “display: none” on some of the buttons in the admin panel.


(cpradio) #11

you might be able to do this in a theme using JS on load. You could detect of the user is a mod/admin and add the class

Let me see if I can find code that is close.


(cpradio) #12

This has the code for reading the logged in user

Relevant JS (admin property is a guess it might be isAdmin or something along those lines)

var currentUser = Discourse.User.current();
if(currentUser != null && currentUser.staff && !currentUser.admin) {
       

You just have to figure out what event to put that code in (I think there is a page load event but I don’t recall it’s name)


(Sarah) #13

That will work :slight_smile: Thank you!!


(Sarah) #14

Actually, I remember now why I was trying to do this in a plugin and not in javascript. |

In JS its hard to tell when the user is in the admin page. And in the past I have tried to add classes before and I couldn’t find a persistent event so that my JS code would run on every page. api.onpagechange only works when the url changes (not the view).

Thank you for the help!

I guess I’ll overwrite the admin wrapper with my class name in it and see how that goes