{"id":13612362,"url":"https://github.com/mslinn/jekyll_pre","last_synced_at":"2025-03-23T08:32:16.103Z","repository":{"id":56878731,"uuid":"469296336","full_name":"mslinn/jekyll_pre","owner":"mslinn","description":"Jekyll tags for HTML \u003cpre/\u003e, copy content button, unselectable text, and incorporating command-line output into documents","archived":false,"fork":false,"pushed_at":"2024-04-05T19:22:52.000Z","size":586,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T07:00:30.290Z","etag":null,"topics":["jekyll","jekyll-plugin","jekyll-tag"],"latest_commit_sha":null,"homepage":"https://www.mslinn.com/jekyll_plugins/jekyll_pre.html","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mslinn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-13T07:05:27.000Z","updated_at":"2024-06-10T00:43:31.192Z","dependencies_parsed_at":"2022-08-20T22:31:23.121Z","dependency_job_id":"b8a39b12-e931-4b6a-8a39-f88fdc6ad174","html_url":"https://github.com/mslinn/jekyll_pre","commit_stats":{"total_commits":59,"total_committers":2,"mean_commits":29.5,"dds":0.4915254237288136,"last_synced_commit":"098317822ee07a039760bf2ff968d8c54809cc9e"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mslinn%2Fjekyll_pre","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mslinn%2Fjekyll_pre/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mslinn%2Fjekyll_pre/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mslinn%2Fjekyll_pre/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mslinn","download_url":"https://codeload.github.com/mslinn/jekyll_pre/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jekyll","jekyll-plugin","jekyll-tag"],"created_at":"2024-08-01T20:00:28.688Z","updated_at":"2025-03-23T08:32:15.544Z","avatar_url":"https://github.com/mslinn.png","language":"Ruby","funding_links":[],"categories":["Tags"],"sub_categories":[],"readme":"# Jekyll_pre [![Gem Version](https://badge.fury.io/rb/jekyll_pre.svg)](https://badge.fury.io/rb/jekyll_pre)\n\nThis Jekyll plugin provides 3 new Liquid tags that work together: `pre`, `noselect` and `exec`.\n\n## Provided Tags\n\n### `Pre`\n\nA `pre` block tag can be displayed various ways.\n\n```html\n{% pre [Options] [free text label] %}\nContents of pre tag\n{% endpre %}\n```\n\n`Options` are:\n\n  * `class=\"class1 class2\"` \u0026ndash; Apply CSS classes\n  * `clear` \u0026ndash; Line break after floating HTML elements\n  * `copyButton` \u0026ndash; Generate a copy button\n  * `dark` \u0026ndash; Dark mode\n  * `dedent` \u0026ndash; Remove leading spaces common to all lines, like Ruby's \u003c\u003c~ squiggly heredoc (default is false)\n  * `id` \u0026dash; Generate an `id` with the given value for the generated output.\n  * `label='This is a label'` \u0026ndash; Apply text above `pre` tag.\n    The `label` parameter value can also be specified in free text.\n    For example, the following produce the same results:\n\n    * {% pre label=\"This is a label\" %}\u003cbr\u003eContents of pre tag\u003cbr\u003e{% endpre %}\n\n    * {% pre This is a label %}\u003cbr\u003eContents of pre tag\u003cbr\u003e{% endpre %}\n  * `number` \u0026ndash; Number the lines\n  * `shell` \u0026ndash; Equivalent to `label='Shell'`\n  * `style` \u0026ndash; Apply inline CSS styles\n\nThe generated \u0026lt;pre\u003e\u0026lt;/pre\u003e tag has an `data-lt-active=\"false\"` attribute, so\n[LanguageTool](https://forum.languagetool.org/t/avoid-spell-check-on-certain-html-inputs-manually/3944)\ndoes not check the spelling or grammar of the contents.\n\n\n### `Noselect`\n\nA `noselect` tag renders HTML content passed to it unselectable,\nand generates a \u003ccode\u003e$\u003c/code\u003e prompt if no content is provided.\n\n```html\n{% pre %}\n{% noselect [optional text string, defaults to $]%}Command\n{% noselect unselectable output goes here %}\n{% endpre %}\n```\n\n### `Exec`\n\nAn `exec` tag executes shell commands and incorporates the command and its output into the content of the `pre` tag.\nEnvironment variables are evaluated,\noutput data is escaped, whitespace is condensed, and wrapped in the same `unselectable` class as does `unselectable`.\n\n```html\n{% exec [Options] [shell command] %}\n```\n\n`Options` are:\n\n* `cd=\"relative/or/absolute/directory\"` - Change to specified directory before executing shell command.\n  Environment variables in the directory path will be expanded.\n* `die_if_nonzero` – Set `false` to treat non-zero return codes as non-fatal.\n  Instead of terminating Jekyll with an error message,\n  the message will be displayed as an error by the Jekyll logger,\n  and a red message will appear in place of the result on the web page.\n* `die_if_error` – Set `false` to treat exceptions generated by this plugin as non-fatal.\n  Instead of terminating Jekyll with an error message, the message will be displayed as an error by the Jekyll logger.\n* `no_escape` – Do not HTML escape the result of running the shell command.\n* `no_stderr` - Discard STDERR output.\n  This is helpful for suppressing annoying `groff` error messages that are emitted when the `exec` subcommand runs `man`.\n  Use it like this:\n\n  ```html\n  {% pre copyButton dedent shell %}\n  {% noselect %}{% exec no_stderr man netplan %}\n  {% endpre %}\n  ```\n\n* `no_strip` – Do not remove leading and trailing whitespace from the result.\n* `wrapper_class` class applied to outer `div`.\n* `wrapper_style` style applied to outer `div`.\n\n\n## Keyword Options\n\nFor all keyword options, including keyword options for the `pre` and `exec` tags:\n\n - Option values specified in the document *may* be provided.\n   If a value is not provided, the value `true` is assumed.\n   Otherwise, if a value is provided, it *must* be wrapped in single or double quotes.\n\n - Option values specified in `_config.yml` *must* be provided, and the value `true` cannot be implied.\n   Values that do not contain special characters *may* be wrapped in single or double quotes.\n\n### Examples\n\n#### Specifying Tag Option Values\n\nThe following sets `die_if_error` `true`:\n\n```html\n{% pre die_if_error %} ... {% endpre %}\n```\n\nThe above is the same as writing:\n\n```html\n{% pre die_if_error='true' %} ... {% endpre %}\n```\n\nOr writing:\n\n```html\n{% pre die_if_error=\"true\" %} ... {% endpre %}\n```\n\nNeglecting to provide surrounding quotes around the provided value causes the parser to not recognize the option.\nInstead, what you had intended to be the keyword/value pair will be parsed as part of the command.\nFor the `pre` tag, this means the erroneous string becomes part of the `label` value, unless `label` is explicitly specified.\nFor the `exec` tag, this means the erroneous string becomes part of the command to execute.\nThe following demonstrates the error.\n\n```html\n{% pre die_if_error=false %} ... {% endpre %}\n```\n\nThe above causes the label to be `die_if_error=false`.\n\n```html\n{% exec die_if_error=false ls %} ... {% endpre %}\n```\n\nThe above causes the command to be executed to be `die_if_error=false ls` instead of `ls`.\n\n\n## CSS\n\nSee [`demo/assets/css/style.css`](demo/assets/css/style.css) for the CSS declarations,\nbetween `/* Start of pre tag css */` and `/* End of pre tag css */`.\n\n\n## Configuration\n\nDefault options can be set for the `pre` tag by entries in `_config.yml`.\nThe following demonstrates setting a default value for every possible option:\n\n```yml\npre:\n  class: bg_yellow\n  clear: true\n  dark: true\n  dedent: true\n  highlight: 'Error:.*'\n  label: Shell\n  copyButton: true\n  number: true\n  style: 'font-face: courier'\n  wrapper_class: rounded shadow\n  wrapper_style: 'padding: 2em; border: thin green dashed;'\n```\n\nThe default values used on [`mslinn.com`](https://www.mslinn.com) are:\n\n```yml\npre:\n  dedent: true\n  label: Shell\n  copyButton: true\n```\n\n\n### Specifying Default Option Values\n\nSpecifying a default value for `die_if_error` in `_config.yml` could be done as follows:\n\n```yaml\npre:\n  die_if_error: true\n```\n\n```yaml\npre:\n  die_if_error: \"true\"\n```\n\n```yaml\npre:\n  die_if_error: 'true'\n```\n\n\n## Additional Information\n\nMore information is available on\n[Mike Slinn\u0026rsquo;s website](https://www.mslinn.com/jekyll_plugins/jekyll_pre.html).\n\n\n## Installation\n\n### Gem\n\nAdd this line to your application's Gemfile, within the `jekyll_plugins` group:\n\n```ruby\ngroup :jekyll_plugins do\n  gem 'jekyll_pre'\nend\n```\n\nAnd then execute:\n\n```shell\n$ bundle\n```\n\n\n### CSS and Assets\n\nCopy assets and CSS from the demo/ directory of the jekyll_pre GitHub project.\n\n* Copy `demo/assets/images/clippy.svg` to a directory of the same name in your Jekyll project.\n* Copy `demo/assets/css/jekyll_plugin_support.css` to your Jekyll project assets directory.\n* Copy `demo/assets/css/shared_include_pre.css` to your Jekyll project assets directory.\n* Copy `demo/assets/css/jekyll_pre.css` to your Jekyll project assets directory.\n* Incorporate the CSS stylesheets into the appropriate layout in your Jekyll project:\n\n```html\n{% assign nowMillis = site.time | date: '%s' %}\n\u003clink rel=\"stylesheet\" href=\"{{ '/assets/css/jekyll_plugin_support.css?v=' | append: nowMillis }}\" type=\"text/css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"{{ '/assets/css/shared_include_pre.css?v=' | append: nowMillis }}\" type=\"text/css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"{{ '/assets/css/jekyll_pre.css?v=' | append: nowMillis }}\" type=\"text/css\"\u003e\n```\n\n\n### JavaScript\n\nCopy `demo/assets/js/clipboard.min.js` from the `jekyll_flexible_include_plugin` GitHub project\nto your Jekyll project’s JavaScript directory.\n\nModify the Jekyll layout or selected pages to load the JavaScript.\nYou can load it from your project, as shown below, or from a CDN.\n\n```html\n\u003cscript defer src=\"/assets/js/clipboard.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\nThe following examples are rendered on\n[Mike Slinn\u0026rsquo;s website](https://www.mslinn.com/jekyll_plugins/jekyll_pre.html).\n\n### Example 0\n\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"id110c50d624b4\"\u003e{% pre dedent %}\n    This line was indented 4 spaces\n      This line was indented 6 spaces\n    This line was indented 4 spaces\n{% endpre %}\u003c/pre\u003e\n\nWhich renders as:\n\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"id377433c30186\"\u003eThis line was indented 4 spaces\n  This line was indented 6 spaces\nThis line was indented 4 spaces\u003c/pre\u003e\n\n\n### Example 1\n\nThis example does not generate a copy button and does not demonstrate `noselect`.\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"id110c50d624b4\"\u003e{% pre %}\nContents of pre tag\n{% endpre %}\u003c/pre\u003e\n\nGenerates:\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"idddd87a0eb77d\"\u003e\u0026lt;pre data-lt-active='false' class='maxOneScreenHigh copyContainer' id='id377433c30186'\u0026gt;Contents of pre tag\u0026lt;/pre\u0026gt;\u003c/pre\u003e\n\nWhich renders as:\n\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"id377433c30186\"\u003eContents of pre tag\u003c/pre\u003e\n\n\n### Example 2\n\nThis example generates a copy button and does not demonstrate `noselect`.\n\n{% pre copyButton %}\nContents of pre tag\n{% endpre %}\n\nGenerates:\n\u003cpre data-lt-active=\"false\" class=\"maxOneScreenHigh copyContainer\" id=\"id08a5d26db177\"\u003e\u0026lt;pre data-lt-active='false' class='maxOneScreenHigh copyContainer' id='id6a831a3e8992'\u0026gt;\u0026lt;button class='copyBtn' data-clipboard-target='#id6a831a3e8992' title='Copy to clipboard'\u0026gt;\u0026lt;img src='images/clippy.svg' alt='Copy to clipboard' style='width: 13px'\u0026gt;\u0026lt;/button\u0026gt;Contents of pre tag\u0026lt;/pre\u0026gt;\u003c/pre\u003e\n\nWhich renders as (note the clipboard icon at the far right):\n![example 2](images/usage2example.png)\n\n\n### Example 3\n\nThis example generates a copy button and does demonstrates the default usage of `noselect`, which renders an unselectable dollar sign followed by a space.\n\n```html\n{% pre copyButton %}\n{% noselect %}Contents of pre tag\n{% endpre %}\n```\n\nGenerates:\n\n```html\n\u003cpre data-lt-active='false' class='maxOneScreenHigh copyContainer' id='id1e4a8fe53480'\u003e\u003cbutton class='copyBtn' data-clipboard-target='#id1e4a8fe53480' title='Copy to clipboard'\u003e\u003cimg src='/assets/images/clippy.svg' alt='Copy to clipboard' style='width: 13px'\u003e\u003c/button\u003e\u003cspan class='unselectable'\u003e$ \u003c/span\u003eContents of pre tag\u003c/pre\u003e\n```\n\nWhich renders as:\n\n![example 3](images/usage3example.png)\n\n\n### Example 4\n\nThis example generates a copy button and does demonstrates the `noselect` being used twice:\nthe first time to render an unselectable custom prompt,\nand the second time to render unselectable output.\n\n```html\n{% pre copyButton %}\n{% noselect \u0026gt;\u0026gt;\u0026gt; %}Contents of pre tag\n{% noselect How now brown cow%}\n{% endpre %}\n```\n\nGenerates:\n\n```html\n\u003cpre data-lt-active='false' class='maxOneScreenHigh copyContainer' id='idb58a6cf1761c'\u003e\u003cbutton class='copyBtn' data-clipboard-target='#idb58a6cf1761c' title='Copy to clipboard'\u003e\u003cimg src='/assets/images/clippy.svg' alt='Copy to clipboard' style='width: 13px'\u003e\u003c/button\u003e\u003cspan class='unselectable'\u003e\u003e\u003e\u003e \u003c/span\u003econtents of pre tag\n\u003cspan class='unselectable'\u003eHow now brown cow\u003c/span\u003e\u003c/pre\u003e\n```\n\nWhich renders as:\n\n![example 4](images/usage4example.png)\n\n\n### Example 5\n\nA regular expression can be passed to the `highlight` option.\nThis causes text that matches the regex pattern to be wrapped within a \u0026lt;span class=\"bg_yellow\"\u003e\u0026lt;/span\u003e tag.\n\nThe CSS stylesheet used for this page contains the following:\n\n```css\n.bg_yellow {\n  background-color: yellow;\n  padding: 2px;\n}\n```\n\nThis example demonstrates highlighting text that matches a regular expression.\nRegular expressions match against lines,\nwhich are delimited via newlines (\\n).\n\n```html\n{% pre copyButton highlight=\"Line 2\" %}\nLine 1\n  Line 2\n    Line 3\n      Line 4\n    Line 5\n  Line 6\nLine 7\n{% endpre %}\n```\n\n\n### Example 6\n\nRegular expressions match against lines, which are delimited via newlines (`\\n`).\nThus to match an entire line that contains a phrase, specify the regex as `.*phrase.*`.\nThe following matches 3 possible phrases (`2`, `4` or `6`), then selects the entire line if matched.\n\n```html\n{% pre copyButton highlight=\".*(2|4|6).*\" %}\nLine 1\n  Line 2\n    Line 3\n      Line 4\n    Line 5\n  Line 6\nLine 7\n{% endpre %}\n```\n\n\n### Example 7\n\nThis example floats an image to the right.\nThe `jekyll_pre plugin`’s `clear` option moves the generated HTML below the image.\n\n```html\n\u0026lt;img src=\"jekyll.webp\" style=\"float: right; width: 100px; height: auto;\"\u003e\n{% pre clear copyButton label='Clear example' %}\nUsing clear, copyButton and label parameters\n{% endpre %}\n```\n\n### Example 8\n\nThe following executes `ls -alF /` and displays the output.\n\n```html\n{% pre clear copyButton label='Exec without error' %}\n{% noselect %}{% exec die_if_nonzero='false' ls -alF / %}\n{% endpre %}\n```\n\n### Example 9\n\nThe following changes to the home directory (`$HOME`), then executes `pwd` and displays the output.\n\n```html\n{% pre clear copyButton label='Exec without error' %}\n{% noselect %}{% exec cd=\"$HOME\" die_if_nonzero='false' pwd %}\n{% endpre %}\n```\n\n### Example 10\n\nThe following executes `echo $USER` and displays the output.\n\n```html\n{% pre clear copyButton label='Exec display \u0026dollar;USER' %}\n{% noselect %}{% exec die_if_nonzero='false' echo $USER %}\n{% endpre %}\n```\n\n\n### Comprehensive Example\n\nThe code I wrote to generate the above CSS was a good example of how the plugins work together with\nthe `from` and `to` tags from my [`from_to_until`](https://github.com/mslinn/jekyll_from_to_until) plugin:\n\n```html\n{% capture css %}{% flexible_include '_sass/mystyle.scss' %}{% endcapture %}\n{% pre copyButton %}{{ css | from: '.copyBtn' | to: '^$' | strip }}\n\n{{ css | from: '.copyContainer' | to: '^$' | strip }}\n\n{{ css | from: '.maxOneScreenHigh' | to: '^$' | strip }}\n\n{{ css | from: '.unselectable' | to: '^$' | strip }}\n{% endpre %}\n```\n\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies.\n\nYou can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\n\n## Test\n\nA test website is provided in the `demo` directory.\n\n1. Set breakpoints.\n2. Initiate a debug session from the command line:\n\n   ```shell\n   $ bin/attach demo\n   ```\n\n3. Once the `Fast Debugger` signon appears, launch the Visual Studio Code launch configuration called `Attach rdebug-ide`.\n4. View the generated website at [`http://localhost:4444`](http://localhost:4444)\n\n\n### Build and Install Locally\n\nTo build and install this gem onto your local machine, run:\n\n```shell\n$ bundle exec rake install\n```\n\nExamine the newly built gem:\n\n```shell\n$ gem info jekyll_pre\n\n*** LOCAL GEMS ***\n\njekyll_pre (1.0.0)\n    Author: Mike Slinn\n    Homepage:\n    https://github.com/mslinn/jekyll_pre\n    License: MIT\n    Installed at: /home/mslinn/.gems\n\n    Generates Jekyll logger with colored output.\n```\n\n\n### Build and Push to RubyGems\n\nTo release a new version,\n\n  1. Update the version number in `version.rb`.\n  2. Commit all changes to git; if you don't the next step might fail with an unexplainable error message.\n  3. Run the following:\n\n     ```shell\n     $ bundle exec rake release\n     ```\n\n     The above creates a git tag for the version, commits the created tag,\n     and pushes the new `.gem` file to [RubyGems.org](https://rubygems.org).\n\n\n## Contributing\n\n1. Fork the project\n2. Create a descriptively named feature branch\n3. Add your feature\n4. Submit a pull request\n\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmslinn%2Fjekyll_pre","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmslinn%2Fjekyll_pre","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmslinn%2Fjekyll_pre/lists"}