这是indexloc提供的服务，不要输入任何密码
Skip to content

docs: Add more questions and answers to the FAQ #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 28, 2022
Merged

docs: Add more questions and answers to the FAQ #112

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 40 additions & 11 deletions docs/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,58 @@
# How do I include Readme Typing SVG in my Readme?
# FAQ

Markdown files on GitHub support embedded images using Markdown or HTML.
## How do I include Readme Typing SVG in my Readme?

Markdown:
Markdown files on GitHub support embedded images using Markdown or HTML. You can customize your SVG on the [demo site](https://readme-typing-svg.herokuapp.com/demo/) and use the image source in either of the following ways:

```html
### Markdown

```md
[![Typing SVG](https://readme-typing-svg.herokuapp.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)
```

HTML:
### HTML

```html
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.herokuapp.com/?lines=First+line+of+text;Second+line+of+text"></a>
```

# FAQs
## The text is getting cut off at the end, how do I fix it?

## How do I center the image on the page?
The text rendered within the SVG can be any variable width, therefore you must specify the width manually to ensure the text will fit.

We can do so by *using the HTML version*, and then wrapping it by the HTML attribute of `align="center"`.
The `width` parameter in the URL should be increased such that the full width of the text is displayed properly.

You can do so by:
```md
https://readme-typing-svg.herokuapp.com/?lines=Your+Long+Message+With+A+Long+Width&width=460
```

## How do I center the image on the page?

To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align="center"`.

```html
<p align="center">
<img src="https://readme-typing-svg.herokuapp.com/?lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out!&font=Fira%20Code&center=true&width=380&height=50">
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.herokuapp.com/?lines=This+image+is+center-aligned&font=Fira%20Code&center=true&width=380&height=50"></a>
</p>
```
```

## How do I add multiple spaces in the middle of a line?

Similar to HTML, SVG/XML treats multiple consecutive spaces as a single space.

A workaround for adding extra spaces can be to use other whitespace characters (for example, you can copy-paste the en-space or other unusual spaces from https://qwerty.dev/whitespace). The alternate whitespace characters don't get ignored.

## How do I make different SVGs for dark mode and light mode?

As of May 2022, you can now [specify theme context](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) using the `<picture>` and `<source>` elements as shown below. The dark mode version appears in the `srcset` of the `<source>` tag and the light mode version appears in the `src` of the `<img>` tag.

```html
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://readme-typing-svg.herokuapp.com/?lines=You+are+using+dark+mode&color=FFFFFF">
<img src="https://readme-typing-svg.herokuapp.com/?lines=You+are+using+light+mode&color=000000">
</picture>
```

## How do I create a Readme for my profile?

A profile readme appears on your profile page when you create a repository with the same name as your username and add a `README.md` file to it. For example, the repository for the user [`DenverCoder1`](https://github.com/DenverCoder1) is located at [`DenverCoder1/DenverCoder1`](https://github.com/DenverCoder1/DenverCoder1).