URL highlighting text tinkering: Difference between revisions

From MWStake
Jump to navigation Jump to search
(Created page with "URLs to wikis can highlight sections of text using the pages '''URL''', followed by <code>#:~:text=</code>, followed by the '''URL encoded''' section of the text.")
 
No edit summary
 
(6 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>, followed by 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:
#* <code>[</code>
# Then add the pages URL, for example:
#* <code><nowiki>https://mwstake.org/wiki/URL_highlighting_text_tinkering</nowiki></code>
# Add this little snippet:
#* <code>#:~:text=</code>
# Add the URL PATH encoded section of the text you want to highlight using <code>{<nowiki>{</nowiki>urlencode:string|PATH}}</code>
#* <code>{<nowiki>{</nowiki>urlencode:highlight sections of text|PATH}}</code>
#* Which results in:
#** {{urlencode:highlight sections of text|PATH}}
# 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:
#* <code>&nbsp; Cool highlighted link]</code>
# Putting this all together, you get:
#* <code>&#91;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):
#* [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>&#91;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]]

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

  1. Start with a normal external link bracket:
    • [
  2. Then add the pages URL, for example:
    • https://mwstake.org/wiki/URL_highlighting_text_tinkering
  3. Add this little snippet:
    • #:~:text=
  4. 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
  5. 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]
  6. Putting this all together, you get:
    • [https://mwstake.org/wiki/URL_highlighting_text_tinkering#:~:text={{urlencode:highlight sections of text|PATH}} Cool tip]
  7. Which results in (need to open in a new tab):


Longer sections of text

  1. 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 ,
  2. 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]
  3. Which results in (need to open in a new tab):


Notes