Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
179 lines (124 sloc) 4.07 KB

Get start

Access the repository,Git or Download it,importTextretty.min.css。

<link rel="stylesheet" href="textretty.css">

Textretty's Link tag should precede the Link tag of your own CSS file.

Set .Tp - container class to an element, it will become Textretty container, Textretty only works in this container.

<div class="tp-container">
  <-- content -->


Here is a list of all the variables for Textretty that you can write to and override in your own CSS file based on the comments. {
    --theme-color: /* Theme colors, some elements will use this as a foreground or background color */;
    --bg-color: /* Container background color */

Google Fonts

For a better reading experience, we recommend that you include Google Fonts. Just add the Link tag to the head tag.

<link href="|Noto+Serif+SC:300|ZCOOL+KuaiLe|ZCOOL+XiaoWei&display=swap" rel="stylesheet">

From here, you will learn about Textretty's writing specifications and some extensions or components that you may use.


If you know HTML, you must know h1, h2, h3, h4, h5, and h6 . Just keep in mind, the body content headings should be started with the secondary title (h2).

Main title

Add to elements. Tp - maintitle class, making it main title, as a general title of the whole document. Main title can be h1, h2, h3, h4, h5, and h6 in any one, but the main title is always the size of the 40 px, and there will be an underscore.

<h1 class="tp-maintitle">Main title</h1>


Write the headline in a < small > tag, as the subtitle of the headlines.


Block quote

You should write block quote in the following way

I'm a quote text.

<blockquote><p>I'm a quoted text.</p></blockquote>

Code blocks

Code blocks are divided into inline code blocks and block-level code blocks

<code>inline code blocks</code>
<pre><code>inline code blocks</code><pre>

Language corner mark

To represent the language of your code, add a hover icon to the block-level code block as follows:

<pre><code><span class="tp-codelang">Language</span></code></pre>


Textretty currently only defines styles for unordered and ordered lists.

Unordered list

  • The sample
  • The sample
  • The sample
  • The sample
    • The nested sample
    • The nested sample
    • The nested sample
  • The sample

Ordered list

  1. The sample

  2. The sample

  3. The sample

    1. The nested sample
    2. The nested sample
    3. The nested sample
  4. The sample

  5. The sample



Adding to the table. The tp - table - bordered class, so that you can add borders to form all the cell.

<table class="tp-table-bordered"></table>

Adding to the table. The tp - table - striped class, then the background color of the table header and td(even numbers) will turn into light gray.

<table class="tp-table-striped"></table>

Browser compatibility: this feature is not supported in IE 8 and below.


Color is a great tool for conveying emotions.

<div class="tp-alert-normal">A general message or just a message</div>
<div class="tp-alert-danger">An error message or just a warning</div>
<div class="tp-alert-success">An indication of successful operation</div>


At present, Textretty is still under development and it is not perfect. To star as support is welcomed, also Pull Requests. If there are any bugs or suggestions, please timely submit them to issue for me to fix, thank you!
At the same time, please do not delete the copyright information in the CSS file, just 6 lines of comments will not kill you, right?

You can’t perform that action at this time.