URL highlighting text tinkering: Difference between revisions
Jump to navigation
Jump to search
Bryandamon (talk | contribs) No edit summary |
Bryandamon (talk | contribs) No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
URLs to wikis can highlight sections of text using the pages '''URL''', followed by <code>#:~:text=</code>, and ending with the '''URL encoded''' section of the text. | URLs to websites (including wikis) can highlight sections of text using the pages '''URL''', followed by <code>#:~:text=</code>, and ending with the '''URL encoded''' section of the text. | ||
==Build the link== | |||
# Start with a normal external link bracket: | # Start with a normal external link bracket: | ||
#* <code>[</code> | #* <code>[</code> | ||
# Then add the pages URL, for example: | # Then add the pages URL, for example: | ||
#* <code><nowiki>https://mwstake.org | #* <code><nowiki>https://mwstake.org/wiki/URL_highlighting_text_tinkering</nowiki></code> | ||
# Add this little snippet: | # Add this little snippet: | ||
#* <code>#:~:text=</code> | #* <code>#:~:text=</code> | ||
Line 16: | Line 16: | ||
#* <code> Cool highlighted link]</code> | #* <code> Cool highlighted link]</code> | ||
# Putting this all together, you get: | # Putting this all together, you get: | ||
#* <code>[htt<nowiki>p</nowiki>s://mwstake.org | #* <code>[htt<nowiki>p</nowiki>s://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={<nowiki>{</nowiki>urlencode:highlight sections of text|PATH}} Cool tip]</code> | ||
# Which results in (need to open in a new tab): | # Which results in (need to open in a new tab): | ||
#* [https://mwstake.org | #* [https://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={{urlencode:highlight sections of text|PATH}} Cool tip] | ||
==Longer sections of text== | |||
# The same format can be used to capture longer strings without capturing all the text by separating the two sections of text with a comma <code>,</code> | |||
# For example: | |||
#* <code>[htt<nowiki>p</nowiki>s://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={<nowiki>{</nowiki>urlencode:URLs to websites|PATH}},{<nowiki>{</nowiki>urlencode:section of the text.|PATH}} Cool tip 2]</code> | |||
# Which results in (need to open in a new tab): | |||
#* [https://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={{urlencode:URLs to websites|PATH}},{{urlencode:section of the text.|PATH}} Cool tip 2] | |||
==Notes== | |||
* Only works on Chrome | |||
* https://www.howtogeek.com/658842/how-to-use-google-chromes-new-deep-linking-feature/ | |||
* https://arstechnica.com/gadgets/2020/06/google-pushes-text-fragment-links-with-new-chrome-extension/ | |||
[[Category:Wiki Moment]] | [[Category:Wiki Moment]] |
Latest revision as of 01:58, 2 August 2024
URLs to websites (including wikis) can highlight sections of text using the pages URL, followed by #:~:text=
, and ending with the URL encoded section of the text.
Build the link
- Start with a normal external link bracket:
[
- Then add the pages URL, for example:
https://mwstake.org/wiki/URL_highlighting_text_tinkering
- Add this little snippet:
#:~:text=
- Add the URL PATH encoded section of the text you want to highlight using
{{urlencode:string|PATH}}
{{urlencode:highlight sections of text|PATH}}
- Which results in:
- highlight%20sections%20of%20text
- Then finish with a space (normal for an external link), the alternative text (probably ideal since the URL will likely be long), and then a closing bracket:
Cool highlighted link]
- Putting this all together, you get:
[https://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={{urlencode:highlight sections of text|PATH}} Cool tip]
- Which results in (need to open in a new tab):
Longer sections of text
- The same format can be used to capture longer strings without capturing all the text by separating the two sections of text with a comma
,
- For example:
[https://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={{urlencode:URLs to websites|PATH}},{{urlencode:section of the text.|PATH}} Cool tip 2]
- Which results in (need to open in a new tab):