Skip to content
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.

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

Test page: Show tokens option #1757

Merged
merged 3 commits into from
Mar 10, 2019

Conversation

RunDevelopment
Copy link
Member

This PR adds a Show tokens option to the test page.

The purpose of this option is to make the nested structure and range of tokens visible.
This is useful for both the developing and reviewing process because it visualizes the output token stream of Prism with greater detail than simple highlighting.

When enabled, it will surround each token with a solid 1px border and give it a 1px margin to other tokens. The border color is the font color of the token.

To enable the option, click the new checkbox:

image

Images

Overview:

image

The nested structure of a tag token is clearly visible:

image

Empty tokens are made visible:

image

Limitations

Only a maximum of 4 nested levels can be visualized using borders. Greater than level 4 tokens will be displayed like this:

image
image

You have to try quite hard to get more than 4 nested levels of tokens, so this shouldn't happen too often.

Browser support

Everything is tested and working on the latest versions of Chrome, Opera, Firefox, Edge, and IE11.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants