Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div><style>
    .highlight table td { padding: 5px; }
    .highlight table pre { margin: 0; }
    .highlight, .highlight .w {
      color: #c9d1d9;
      background-color: #161b22;
    }
    .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
      color: #ff7b72;
    }
    .highlight .gr {
      color: #f0f6fc;
    }
    .highlight .gd {
      color: #ffdcd7;
      background-color: #67060c;
    }
    .highlight .nb {
      color: #ffa657;
    }
    .highlight .nc {
      color: #ffa657;
    }
    .highlight .no {
      color: #ffa657;
    }
    .highlight .nn {
      color: #ffa657;
    }
    .highlight .sr {
      color: #7ee787;
    }
    .highlight .na {
      color: #7ee787;
    }
    .highlight .nt {
      color: #7ee787;
    }
    .highlight .gi {
      color: #aff5b4;
      background-color: #033a16;
    }
    .highlight .kc {
      color: #79c0ff;
    }
    .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
      color: #79c0ff;
    }
    .highlight .sb {
      color: #79c0ff;
    }
    .highlight .bp {
      color: #79c0ff;
    }
    .highlight .ne {
      color: #79c0ff;
    }
    .highlight .nl {
      color: #79c0ff;
    }
    .highlight .py {
      color: #79c0ff;
    }
    .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
      color: #79c0ff;
    }
    .highlight .o, .highlight .ow {
      color: #79c0ff;
    }
    .highlight .gh {
      color: #1f6feb;
      font-weight: bold;
    }
    .highlight .gu {
      color: #1f6feb;
      font-weight: bold;
    }
    .highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
      color: #a5d6ff;
    }
    .highlight .nd {
      color: #d2a8ff;
    }
    .highlight .nf, .highlight .fm {
      color: #d2a8ff;
    }
    .highlight .err {
      color: #f0f6fc;
      background-color: #8e1519;
    }
    .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
      color: #8b949e;
    }
    .highlight .gl {
      color: #8b949e;
    }
    .highlight .gt {
      color: #8b949e;
    }
    .highlight .ni {
      color: #c9d1d9;
    }
    .highlight .si {
      color: #c9d1d9;
    }
    .highlight .ge {
      color: #c9d1d9;
      font-style: italic;
    }
    .highlight .gs {
      color: #c9d1d9;
      font-weight: bold;
    }
  </style>
  <div data-controller="clipboard" data-clipboard-success-value="Copied!" data-clipboard-error-value="Copy failed!" class="relative">
    <div>
      <div data-clipboard-target="source">
        <div class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4">
          <div class="after:content-none">
            <pre><span class="k">def</span> <span class="nf">hello_world</span>
	<span class="nb">puts</span> <span class="s2">"Hello, world!"</span>
<span class="k">end</span>
</pre>
          </div>
        </div>
      </div>
      <div class="absolute top-2 right-2">
        <div data-clipboard-target="trigger" data-action="click->clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div>
      </div>
    </div>
    <template data-clipboard-target="successPopover">
      <div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div>
    </template><template data-clipboard-target="errorPopover">
      <div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
code = <<~CODE
  def hello_world
  	puts "Hello, world!"
  end
CODE
render(TestView.new) do
  Codeblock(code, syntax: :ruby)
end

Default Codeblock

No params configured.