---
title: RSyntaxTree
layout: default
---

<h1 id="examples">Example Gallery</h1>
{% assign all_examples = site.examples %}
{% assign categories =  all_examples | map: 'category' | join: ','  | split: ','  | group_by: category %}
<ul>
  {%- for category in categories -%}
    {%- if category.name != "Test" -%}
      <li><a href="#category-{{ category.name | slugify }}">{{ category.name }}</a> [{{category.size}}]</li>
    {%- endif -%}
  {%- endfor -%}
</ul>

{%- for category in categories -%}
  {%- if category.name != "Test" -%}
    <hr />
    <h2 id="category-{{category.name | slugify }}"><b>{{ category.name }}</b></h2>
    {%- for example in all_examples -%}
      {%- if example.category contains category.name -%}
        <h3>{{ example.caption }}</h3>
        <div style='text-align:left;'>
          <button onclick="copyToClipBoard('text-{{ example.name }}')" style='margin: 20px 0; font-size: 0.85em;'>
            Copy to Clipboard
          </button>
        </div>
        <div class='grid'>
          <div style='margin-top: 0; margin-bottom: auto;'>
            <div id="text-{{example.name}}" style='max-height: 600px; overflow-y: auto; margin-bottom: 20px;'>
              {{ example.content | markdownify }}
            </div>
            <table style='line-height: 110%; font-size: 0.85em; margin-bottom: 20px;'>
              <thead></thead>
              <tbody>
                <tr><td>Category</td><td>{{ example.category}}</td></tr>
                <tr><td>Connector</td><td>{{ example.connector }}</td></tr>
                <tr><td>Polyline</td><td>{{ example.polyline }}</td></tr>
                <tr><td>Colorization</td><td>{{ example.colorization }}</td></tr>
                <tr><td>Radical Symmetirization</td><td>{{ example.symmetrization }}</td></tr>
                <tr><td>Font</td><td>{{ example.font }}</td></tr>
                {% if example.reference %}
                  <tr><td>Reference</td><td>{{ example.reference }}</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
          <div style='margin-top: 0; margin-bottom: auto;'>
            <a href='assets/img/{{ example.name }}.png' data-lightbox='{{ example.name }}'>
              <img src='assets/img/{{ example.name}}.png'/>
            </a>
          </div>
        </div>
        <div><a href="#examples">🔝</a></div>
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endfor -%}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.3/src/js/lightbox.js"></script>
<script>
  function copyToClipBoard(id){
      var copyText =  document.getElementById(id).innerText;
      document.addEventListener('copy', function(e) {
          e.clipboardData.setData('text/plain', copyText);
          e.preventDefault();
        }, true);
      document.execCommand('copy');  
      alert('copied'); 
    }
</script>