TownPass

English

繁體中文

English

繁體中文

Appearance

Custom Design ​

Custom Blocks ​

This page will explain how to construct (simplified) rich text content used in customization through JSON.

Table of Contents ​

Introduction ​

Overview ​

The key used for rich text content is rich_text, which is a JsonArray composed of multiple RichTextObject. Here we will detail how to write them.

Below is an example of a rich text JSON:

json
"rich_text": [
  {
    "text": "Are you serious?",
    "style": [
      "ITALIC",
      "BOLD",
      "UNDERLINE"
    ],
    "url": "https://some.url.com"
  },
  {
    "text": "\nNah, I'm kidding."
  }
]
About this example...
There's an extra setting that can be removed. If you find it after reading the introduction...

I can't really give you anything🤣 Give yourself a pat on the back👏

:::

RichTextObject ​

json
{
  "text": "Wololo",
  "style": [
    "ITALIC",
    "BOLD"
  ],
  "url": "https://knowyourmeme.com/memes/wololo"
}

A RichTextObject has three keys:

  • text: The text to be displayed.
  • style: The style of the text, which can be "ITALIC", "BOLD", or "UNDERLINE".
  • url: The hyperlink URL.

The example RichTextObject will display:

Wololo

Next, we'll explain the functions of each key.

RichTextObject.text ​

json
{
  "text": "Wololo"
}

text is the text to be displayed. The example above will display:

Wololo

Any string supported by JSON can be used, such as:

json
{
  "text": "\uD83D\uDCA9\n\uD83D\uDCA9\uD83D\uDCA9\n\uD83D\uDCA9\uD83D\uDCA9\uD83D\uDCA9"
}

This will display:

💩
💩💩
💩💩💩

text can be null, in which case it will check for url, and if url is present, it will display the url content (see url).
(If url is also empty, it's best to remove this RichTextObject as it will not have any effect.)

RichTextObject.style ​

json
{
  "text": "Wololo",
  "style": [
    "ITALIC"
  ]
}

style works with text or url, applying the specified effects to the displayed text. The example above will display:

Wololo

Currently, three effects are defined:

  • "ITALIC": Wololo
  • "BOLD": Wololo
  • "UNDERLINE": Wololo

These can be combined, such as:

json
{
  "text": "Wololo",
  "style": [
    "ITALIC",
    "UNDERLINE"
  ]
}

This will display:

Wololo

* Note: Since hyperlinks already underline the text, adding "UNDERLINE" to the style when using url will not have any additional effect.

RichTextObject.url ​

json
{
  "url": "https://www.google.com"
}

url will generate a hyperlink. The example above will display:

https://www.google.com

url can also be used with text to display text as the hyperlink text directing to url. See the example below:

json
{
  "text": "ググール",
  "url": "https://www.google.co.jp"
}

This will display:

ググール

Combining RichTextObject ​

The previous sections explained the function of each key. Now it's time to combine them. If you want to display the following content:

You Either Die A Hero, Or Live Long Enough To Become A Meme

It can be achieved with the following JSON:

json
"rich_text": [
   {
     "text": "You Either "
   },
   {
     "text": "Die A Hero",
     "style": [
       "BOLD"
     ]
   },
   {
     "text": ", Or Live Long Enough To "
   },
   {
     "text": "Become A Meme",
     "style": [
       "BOLD",
       "ITALIC"
     ],
     "url": "https://imgflip.com/i/3er8jc"
   }
]