pages/_posts/2024-04-29-typograms.md
George ba53f89965
Added support for Google Typograms (#2379)
Google [Typograms](https://github.com/google/typograms/) is a
lightweight image format (text/typogram) useful for defining simple
diagrams in technical documentation.


![image](https://github.com/alshedivat/al-folio/assets/31376482/715ba10b-c75d-492b-8869-4ec83d380e50)


![image](https://github.com/alshedivat/al-folio/assets/31376482/935f6ef8-1977-41d0-8797-d226594b82a9)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
2024-04-30 11:26:56 -03:00

1.8 KiB

layout title date description tags categories typograms
post a post with typograms 2024-04-29 23:36:10 this is what included typograms code could look like formatting diagrams sample-posts true

This is an example post with some typograms code.

```typograms
+----+
|    |---> My first diagram!
+----+
```

Which generates:

+----+
|    |---> My first diagram!
+----+

Another example:

```typograms
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.
```

which generates:

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.

For more examples, check out the typograms documentation.