# 如何为使用 Markdown 创建的表格添加 class 属性

**URL:** https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338
**Category:** Support
**Created:** [2018年四月1日 18:04 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338 "2018-04-01T18:04:14Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![W.M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/w.m/32/93394_2.png) [@W.M](https://meta.discourse.org/u/W.M)
#### Post date: [2018年四月1日 18:04 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/1 "2018-04-01T18:04:14Z")

</div>

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

```plaintext
| 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>`

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年四月1日 19:07 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/2 "2018-04-01T19:07:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![W.M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/w.m/32/93394_2.png) [@W.M](https://meta.discourse.org/u/W.M)
#### Post date: [2018年四月1日 19:17 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/3 "2018-04-01T19:17:06Z")

</div>

> [@codinghorror](#):
>
> This is not possible at the current time. Allowing arbitrary html is a security risk.

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

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2018年四月1日 19:23 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/4 "2018-04-01T19:23:21Z")

</div>

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

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

</div>

```

and then target it in CSS using something like

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

}

```

Originally discussed here:

> [@How can I whitelist a class in a theme?](https://meta.discourse.org/t/how-can-i-whitelist-a-class-in-a-theme/79520/):
>
> I have a working carousel which I would like to package as a theme: [image] I’ve been trying to figure out how to whitelist a class or attribute for the script to target that would work with under a theme. I’ve read: [https://meta.discourse.org/t/whitelisting-some-html-tags/24280](https://meta.discourse.org/t/whitelisting-some-html-tags/24280) and [Whitelist all the code inside of a div tag?](https://meta.discourse.org/t/whitelist-all-the-code-inside-of-a-div-tag/51391/4) But these topics cover plugin structure and I could not get any of the methods to work in a theme. I’ve used the [dir] attribute - white-listed by default - in anot…

---

<div class="post-metadata">

### Author: ![W.M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/w.m/32/93394_2.png) [@W.M](https://meta.discourse.org/u/W.M)
#### Post date: [2018年四月1日 19:29 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/5 "2018-04-01T19:29:56Z")

</div>

@david Thank you very much!

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [2018年六月6日 21:12 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/6 "2018-06-06T21:12:35Z")

</div>

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](https://meta.discourse.org/u/eviltrout)) [Developing Discourse Plugins - Part 2 - Connect to a plugin outlet - #22 by sarahann](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-2-plugin-outlets/31001/22)

> [@codinghorror](#):
>
> This is not possible at the current time. Allowing arbitrary html is a security risk.

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

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2018年六月6日 23:28 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/7 "2018-06-06T23:28:58Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [2018年六月6日 23:31 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/8 "2018-06-06T23:31:41Z")

</div>

Really!?

I know how to add\_to\_class() in the plugin.rb file.

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

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2018年六月6日 23:34 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/9 "2018-06-06T23:34:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [2018年六月6日 23:40 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/10 "2018-06-06T23:40:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2018年六月6日 23:45 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/11 "2018-06-06T23:45:18Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2018年六月6日 23:47 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/12 "2018-06-06T23:47:40Z")

</div>

This has the code for reading the logged in user

> [@Reply reminder - Remind users to reply to new users topics with zero replies](https://meta.discourse.org/t/reply-reminder-remind-users-to-reply-to-new-users-topics-with-zero-replies/42644/8):
>
> Yes, you can \<script\> Discourse.ExternalNavItem = Discourse.NavItem.extend({ href : function() { return this.get('href'); }.property('href') }); I18n.translations.en.js.filters.unanswered = { title: "Unanswered", help: "Topics that have not be answered" }; Discourse.NavItem.reopenClass({ buildList : function(category, args) { var currentUser = Discourse.User.current(); var list = this.\_super(category, args); if(!category && currentUser != null && cu…

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

```plaintext
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)

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [2018年六月6日 23:58 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/13 "2018-06-06T23:58:43Z")

</div>

That will work 🙂 Thank you!!

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [2018年六月7日 00:35 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/14 "2018-06-07T00:35:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年六月8日 12:37 UTC](https://meta.discourse.org/t/how-to-add-a-class-attribute-to-a-table-created-using-markdown/84338/15 "2024-06-08T12:37:20Z")

</div>

此主题已在 2259 天后自动关闭。不再允许回复。
