Skip to content

Commit 3dc5868

Browse files
phillip-krugerphillip-kruger
authored
Merge pull request #10 from phillip-kruger/main
Added support for more languages and updates some deps
2 parents b323c11 + e26586e commit 3dc5868

File tree

4 files changed

+1213
-5398
lines changed

4 files changed

+1213
-5398
lines changed

‎example/index.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -751,6 +751,145 @@ <h4>Markdown:</h4>
751751
</div>
752752
<br/>
753753

754+
<h4>Go:</h4>
755+
756+
<div class="inout">
757+
<div class="card">
758+
This code:
759+
<qui-code-block mode="html" theme="dark">
760+
<slot>
761+
&lt;qui-code-block mode="go" content='package main
762+
763+
import "fmt"
764+
765+
func main() {
766+
fmt.Println("hello world")
767+
}' theme="dark"&gt;&lt;/qui-code-block&gt;
768+
</slot>
769+
</qui-code-block>
770+
</div>
771+
<div class="card">
772+
Will create this output:
773+
<qui-code-block mode="go" content='package main
774+
775+
import "fmt"
776+
777+
func main() {
778+
fmt.Println("hello world")
779+
}' theme="dark" class="toggle"></qui-code-block>
780+
</div>
781+
</div>
782+
<br/>
783+
784+
<h4>PHP:</h4>
785+
786+
<div class="inout">
787+
<div class="card">
788+
This code:
789+
<qui-code-block mode="html" theme="dark">
790+
<slot>
791+
&lt;qui-code-block mode="php" content='
792+
&lt;?php
793+
794+
echo "Hello World!";
795+
796+
?&gt;
797+
' theme="dark"&gt;&lt;/qui-code-block&gt;
798+
</slot>
799+
</qui-code-block>
800+
</div>
801+
<div class="card">
802+
Will create this output:
803+
<qui-code-block mode="php" content='
804+
&lt;?php
805+
806+
echo "Hello World!";
807+
808+
?&gt;
809+
' theme="dark" class="toggle"></qui-code-block>
810+
</div>
811+
</div>
812+
<br/>
813+
814+
<h4>C++:</h4>
815+
816+
<div class="inout">
817+
<div class="card">
818+
This code:
819+
<qui-code-block mode="html" theme="dark">
820+
<slot>
821+
&lt;qui-code-block mode="cpp" content='
822+
#include <iostream>
823+
824+
int main() {
825+
std::cout << "Hello World!";
826+
return 0;
827+
}
828+
' theme="dark"&gt;&lt;/qui-code-block&gt;
829+
</slot>
830+
</qui-code-block>
831+
</div>
832+
<div class="card">
833+
Will create this output:
834+
<qui-code-block mode="cpp" content='
835+
#include <iostream>
836+
837+
int main() {
838+
std::cout << "Hello World!";
839+
return 0;
840+
}
841+
' theme="dark" class="toggle"></qui-code-block>
842+
</div>
843+
</div>
844+
<br/>
845+
846+
<h4>Rust:</h4>
847+
848+
<div class="inout">
849+
<div class="card">
850+
This code:
851+
<qui-code-block mode="html" theme="dark">
852+
<slot>
853+
&lt;qui-code-block mode="rs" content='
854+
fn main() {
855+
println!("Hello World!");
856+
}
857+
' theme="dark"&gt;&lt;/qui-code-block&gt;
858+
</slot>
859+
</qui-code-block>
860+
</div>
861+
<div class="card">
862+
Will create this output:
863+
<qui-code-block mode="rs" content='
864+
fn main() {
865+
println!("Hello World!");
866+
}
867+
' theme="dark" class="toggle"></qui-code-block>
868+
</div>
869+
</div>
870+
<br/>
871+
<h4>Python:</h4>
872+
873+
<div class="inout">
874+
<div class="card">
875+
This code:
876+
<qui-code-block mode="html" theme="dark">
877+
<slot>
878+
&lt;qui-code-block mode="py" content="
879+
print('Hello, world!')
880+
" theme="dark"&gt;&lt;/qui-code-block&gt;
881+
</slot>
882+
</qui-code-block>
883+
</div>
884+
<div class="card">
885+
Will create this output:
886+
<qui-code-block mode="py" content="
887+
print('Hello, world!')
888+
" theme="dark" class="toggle"></qui-code-block>
889+
</div>
890+
</div>
891+
<br/>
892+
754893

755894
<h3 id="editable">Editable code blocks</h3>
756895

@@ -782,6 +921,61 @@ <h3 id="editable">Editable code blocks</h3>
782921

783922
<br/>
784923

924+
<div class="inout">
925+
<div class="card">
926+
This code:
927+
<qui-code-block mode="html" theme="dark">
928+
<slot>
929+
&lt;qui-code-block mode="html" theme="dark" editable&gt;
930+
&lt;slot&gt;
931+
// Type some html here
932+
&lt;/slot&gt;
933+
&lt;/qui-code-block&gt;
934+
</slot>
935+
</qui-code-block>
936+
</div>
937+
938+
<div class="card">
939+
Will create this output:
940+
<qui-code-block mode="html" theme="dark" class="toggle" editable>
941+
<slot>
942+
// Type some html here
943+
</slot>
944+
</qui-code-block>
945+
</div>
946+
</div>
947+
948+
949+
<br/>
950+
951+
<div class="inout">
952+
<div class="card">
953+
This code:
954+
<qui-code-block mode="html" theme="dark">
955+
<slot>
956+
&lt;qui-code-block mode="js" theme="dark" editable&gt;
957+
&lt;slot&gt;
958+
// Type some JavaScript here
959+
&lt;/slot&gt;
960+
&lt;/qui-code-block&gt;
961+
</slot>
962+
</qui-code-block>
963+
</div>
964+
965+
<div class="card">
966+
Will create this output:
967+
<qui-code-block mode="js" theme="dark" class="toggle" editable>
968+
<slot>
969+
// Type some JavaScript here
970+
</slot>
971+
</qui-code-block>
972+
</div>
973+
</div>
974+
975+
976+
<br/>
977+
978+
785979
<script>
786980

787981
const valuechangeeditor = document.getElementById('valuechangeid');

0 commit comments

Comments
 (0)