# Code block outlook doesn't work well

**URL:** https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616
**Category:** Support
**Created:** [June 30, 2022, 10:19pm UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616 "2022-06-30T22:19:26Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![SkyLin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skylin/32/206593_2.png) [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [June 30, 2022, 10:19pm UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/1 "2022-06-30T22:19:26Z")

</div>

The code block works fine in the past. However, there is an user created a new post with code block yesterday, and I found the format failed. Not only this post with block code, but also whole site.

I just rebuild discourse app to the most update version, but the result is still the same.

How can I solve this issue? Thanks for help.

Here comes the url:

> **[【WEEK4 - SET】 Copy by value 與 Copy by reference的疑問](https://vip.studycamp.tw/t/%E3%80%90week4-set%E3%80%91-copy-by-value-%E8%88%87-copy-by-reference%E7%9A%84%E7%96%91%E5%95%8F/3925)**
>
> 大家好 我是見明 在wilson老師課程中提到 某些datatype是 copy by value，某些是copy by reference 而SET是copy by reference，不過在pythontutor看程式執行過程似乎要滿足某些條件 才是copy by reference，所以提出來與大家討論 以下情境一，原有set01，要再加入一個list，且這個list裡面是放tuple set01 = {'evening',1} #tuple add to set ...

---

<div class="post-metadata">

### Author: ![cocococosti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cocococosti/32/231474_2.png) [@cocococosti](https://meta.discourse.org/u/cocococosti)
#### Post date: [June 30, 2022, 11:35pm UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/2 "2022-06-30T23:35:47Z")

</div>

The code blocks look fine to me, do you have a screenshot of the code block format failing?

---

<div class="post-metadata">

### Author: ![Takanobu\_Fuse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/takanobu_fuse/32/267118_2.png) [@Takanobu\_Fuse](https://meta.discourse.org/u/Takanobu_Fuse)
#### Post date: [July 1, 2022, 2:33am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/3 "2022-07-01T02:33:02Z")

</div>

Code Block Sections are not classified by colors after upgrade discourse 2.9.0.beta6

**rainbow**

 ![rainbow](https://global.discourse-cdn.com/meta/original/4X/9/4/6/9466ce44cbfd53c352d5ee319e68a9505c129d53.png)

**mono-blue**

 ![Screenshot from 2022-07-01 11-28-45](https://global.discourse-cdn.com/meta/original/4X/a/d/1/ad1dfb7f75bcda293eea0417cb202d1fc12e9713.png)

---

<div class="post-metadata">

### Author: ![SkyLin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skylin/32/206593_2.png) [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [July 1, 2022, 4:12am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/4 "2022-07-01T04:12:19Z")

</div>

> [@Takanobu\_Fuse](#):
>
> Code Block Sections are not classified by colors after upgrade discourse 2.9.0.beta6

Thanks for great input.

However, it seems meta discourse forum is version 2.9.0.beta6(cause it support “Loading splash screen” now). And the code block works fine here.

---

<div class="post-metadata">

### Author: ![SkyLin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skylin/32/206593_2.png) [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [July 1, 2022, 4:16am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/5 "2022-07-01T04:16:13Z")

</div>

> [@cocococosti](#):
>
> screenshot of the code block format failing

My bad. I should say color outlook instead.

figure 1. the color of python(actually all language) keyword doesn’t highlight

 ![python code sample](https://global.discourse-cdn.com/meta/original/4X/d/e/8/de8f5711e6e26314c3478af42a637aa39a6e4285.jpeg)

original post:

> **[Code Block 程式碼區塊支援的程式語言](https://vip.studycamp.tw/t/code-block-%E7%A8%8B%E5%BC%8F%E7%A2%BC%E5%8D%80%E5%A1%8A%E6%94%AF%E6%8F%B4%E7%9A%84%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/2436)**
>
> 論壇所使用的 程式碼區塊，採用的元件是 highlight.js ，以下將支援程式及顯示範例列出，供大家參考。 使用方式是在第一行的 \`\`\` 後方，加上你想顯示的程式語法，如 python 的寫法就是 \`\`\`python ，依此類推。 支援程式語言 語法別名 (Aliases) Package 1C 1c 4D 4d highlightjs-4d ABAP sap-abap, abap highlight-sap-abap Abc Notation abc...

* * *

figure 2. however, the color diff of code block still works fine

 ![code block diff sample](https://global.discourse-cdn.com/meta/original/4X/5/3/f/53faf0e2a04b4cd9445e299c2856a67543fdaad8.jpeg)

original post:

> **[程式碼修改前後的標示方法](https://vip.studycamp.tw/t/%E7%A8%8B%E5%BC%8F%E7%A2%BC%E4%BF%AE%E6%94%B9%E5%89%8D%E5%BE%8C%E7%9A%84%E6%A8%99%E7%A4%BA%E6%96%B9%E6%B3%95/2435)**
>
> 先看畫面呈現範例： aws-eventstream (1.2.0) - aws-sdk-core (3.112.1) + aws-sdk-core (3.121.2) 第一行表示未更動的原始碼 第二行 - 號表示刪除的原程式碼 第三行 + 號表示新增程式碼。 在 Discourse 中， Preformatted text 預先格式化文字 (Ctrl + E) 也被稱為 Code Block ，因為常被用來作程式說明。 在進行說明前，先要了解 ~ \` （稱為 back...

---

<div class="post-metadata">

### Author: ![Takanobu\_Fuse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/takanobu_fuse/32/267118_2.png) [@Takanobu\_Fuse](https://meta.discourse.org/u/Takanobu_Fuse)
#### Post date: [July 1, 2022, 11:01am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/6 "2022-07-01T11:01:08Z")

</div>

My Solution

1. uninstall component “hljs-theme-picker”

2. pick up the one css file ( I picked up rainbow.css) from the below

> **[hljs-theme-picker/assets at main · discourse/hljs-theme-picker](https://github.com/discourse/hljs-theme-picker/tree/main/assets)**
>
> main/assets

1. edit theme CSS/HTML, copy and paste contents in rainbow.css  
 ![Screenshot from 2022-07-01 19-56-08](https://global.discourse-cdn.com/meta/original/4X/b/5/c/b5ce0132ce317f64ea0da7f3a36b16e3193155a3.png)

This is wrong???

---

<div class="post-metadata">

### Author: ![SkyLin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skylin/32/206593_2.png) [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [July 2, 2022, 6:10am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/7 "2022-07-02T06:10:45Z")

</div>

> [@Takanobu\_Fuse](#):
>
> My Solution
> 
> 1. uninstall component “hljs-theme-picker”
> 2. pick up the one css file ( I picked up rainbow.css) from the below
> 
> [hljs-theme-picker/assets at main · discourse/hljs-theme-picker · GitHub](https://github.com/discourse/hljs-theme-picker/tree/main/assets)
> 
> 1. edit theme CSS/HTML, copy and paste contents in rainbow.css

Many thanks to Takanobu san.

This solution works fine.

 ![python code sample - correct outlook](https://global.discourse-cdn.com/meta/original/4X/b/b/2/bb28fea000c581a7127cb9e5b33ba82ca1f5c158.jpeg)

I think this means discourse hljs theme picker has some hidden bug. No reason the same code works fine with CSS but failed on component installed.

And I’m sorry that I will not set your solusion as ✅ Soluion, though it truly solve my problem. I leave it as open and hope discourse team @cocococosti can find out the reason behind and work out a formal solution.

The CSS code I use is what I set in hljs theme picker:

> <https://github.com/discourse/hljs-theme-picker/blob/main/assets/atom-one-dark.css>

Many thanks again.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [December 6, 2022, 4:25am UTC](https://meta.discourse.org/t/code-block-outlook-doesnt-work-well/231616/11 "2022-12-06T04:25:46Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
