search

fieldtrip / website

This contains the content hosted on the FieldTrip website
http://www.fieldtriptoolbox.org
Other
39 stars 104 forks source link

Implement a copy button for each code block #700

Closed robertoostenveld closed 1 year ago

robertoostenveld commented 1 year ago

This is inspired by github and many other websites that show a lot of code.

It can follow the implementation on https://remarkablemark.org/blog/2021/06/01/add-copy-code-to-clipboard-button-to-jeyll-site/

robertoostenveld commented 1 year ago

Getting the button to appear on the top-right of the code block turned out to be difficult, as it is positioned relative to the page, not relative to the highlighted code snippet. Replacing append() in the javascript code by prepend() resulted in the button being the first element, after which it can be moved to the right of the page.

robertoostenveld commented 1 year ago

Relevant to getting it to work was that the javascript should only run after all page content is loaded, otherwise it would not find the code snippets. I implemented that using defer, in an example somewhere else I noticed https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event being used.