Code Blocks and Github Gists

Last Modified Avatar

Last updated by Sandeep Dinesh 2 months ago

Kbee lets you create code blocks or use Github Gists to let your users copy and paste formatted code from your guides and articles.
A Gist looks like this:
...waiting for Gist...
A code block looks like this:
var x = 0; var y = 1; var z; fib[0] = 0; fib[1] = 1; for (i = 2; i <= 10; i++) { alert(x + y); fib[i] = x + y; x = y; z = y; }
<!DOCTYPE HTML> <html> <body> <p>Before the script...</p> <script> alert( 'Hello, world!' ); </script> <p>...After the script.</p> </body>

Github Gist

Github Gists are the recommended way to share public code. To add a Gist to your article, simply paste in the link to the Gist. Kbee will automatically detect and render the Gist.
Note: Make sure the link turns blue in Google Docs to ensure that it has been detected as a link

Basic Code Block

To create a basic code block, highlight the code in black.
Image 1
If you want multiple code block one after another, make sure there is a line in between them with no highlighting. Google Docs will not show highlights on blank links, so make sure you double check!

Syntax Highlighting

Kbee supports syntax highlighting for many languages. To set up syntax highlighting, put the name of the language in lowercase as the first line of the codeblock.
Image 2

Supported Languages

Kbee currently uses the react-code-blocks package to render code blocks. The supported languages are:
abap
actionscript
ada
arduino
autoit
c
clojure
cs
c
cpp
coffeescript
csharp
css
cuda
d
dart
delphi
elixir
elm
erlang
fortran
foxpro
fsharp
go
graphql
gql
groovy
haskell
haxe
html
java
javascript
json
julia
jsx
js
kotlin
latex
lisp
livescript
lua
mathematica
makefile
matlab
objectivec
objective
objective
objectpascal
ocaml
octave
perl
php
powershell
prolog
puppet
python
qml
r
racket
restructuredtext
rest
ruby
rust
sass
less
scala
scheme
shell
smalltalk
sql
standardml
sml
swift
tcl
tex
text
tsx
ts
typescript
vala
vbnet
verilog
vhdl
xml
xquery

Was this article helpful?

Can't find what you're looking for?

Contact Us
Refreshed On: Jun 20, 2021 18:32:45 UTC+00:00