Astronaut Library .js

CodeViewer

Make viewing your codes more attractive and beautiful in your projects.

Download CodeViewer v1.0.0
Download Library Complete v1.0.0

How to use:

index.html
//Use with div tag
<div class="ast-codeviewer" data-lang="LANGUAGE_HERE">
  //your code here
</div>

//OR use with script tag
<script type="text/plain" class="ast-codeviewer" data-lang="">
  //your code here
</script>
index.html
<script src="src/js/astronaut.codeviewer.js"></script>
script.js
//'astronaut.', 'astlibjs.' or 'ast.' can be used!

astronaut.codeviewer()

Attributes HTML Independents
• Effects will be applied only on div.ast-codeviewer that inserted these attributes.

Name Values Description
data-lang Languages Defines the language of the code that will be displayed
data-title Title Define a title, eg: index.html
data-width
data-height		 Measure Set the height and width
data-copy true/false Enable/Disable copy code button
data-hyperlink true/false Enable/Disable copy hyperlink button
data-blur true/false Enable/Disable blur in background
data-run true/false Enable/Disable code javascript execute button

Opções:

Option Type Value Description
lineNumber: Boolean/Object true/{object} Enable line numbers and/or set style
style: Object {object} Define your stylizations
buttons: Object {object} Enable/Disable Action Buttons

• data-lang:

Defines the language of the code that will be displayed

Values: html, css, js, php

HTML
<div class="ast-codeviewer" data-lang="html">
  <h1>Hello World</h1>
</div>

• data-title:

Define a title, eg: index.html, HTML

HTML
<div class="ast-codeviewer" data-lang="html" data-title="HTML">
  <h1>Hello World</h1>
</div>

• data-width, data-height:

Set the height and width, Values default: width: 100%, height: auto

HTML
<div class="ast-codeviewer" data-lang="html" data-width="80%" data-height="200px">
  <h1>Hello World</h1>
</div>

• data-copy:

Enable/Disable copy code button

HTML
<div class="ast-codeviewer" data-lang="html" data-copy="true">
  <h1>Hello World</h1>
</div>

• data-blur:

Enable/Disable blur in background

HTML
<div class="ast-codeviewer" data-lang="html"  data-blur="true">
  <h1>Hello World</h1>
</div>

• data-run:

Enable/Disable code javascript execute button

HTML
<div class="ast-codeviewer" data-lang="js"  data-run="true">
  alert('Hello World')
  console.log('Hello World')
</div>

Result

alert('Hello World')
console.log('Hello World')

• lineNumber:

Enable line numbers and/or set style

Javascript
astronaut.codeviewer({
  lineNumber: true
})

Others Options

Option Type Default Description
color String #adbac74a Change the color of the line numbers
separator Boolean true Show or hide separator
opacity Number 1 Apply opacity

• style:

Define your stylizations

Option Type Default Description
fontSize: String 0.9rem Set font size
fontFamily: String Fira Code, 'system-ui' Defines the font type
background: String #232A2F Set a background color
color: String #939da5 Set the default font color
windowBar: Boolean/String #1a202363 Show/Hide Window Bar and Set Background Color
blur: String 0 Apply blur in the background
width: String 100% Defines the width of the window
height: String auto Defines the height of the window
boxShadow: String none Define a Box-Shadow
borderRadius: String 0.6rem Defines the rounded edge
theme: String copilot Define a Theme

Examples:

Javascript
astronaut.codeviewer({
  style: {
    fontSize: '0.7rem',
    background: "#000",
    color: '#cfcfcf',
  }
})
Javascript
astronaut.codeviewer({
  style: {
    windowBar: false
  }
})
Javascript
astronaut.codeviewer({
  style: {
    fontFamily: 'monospace',
    borderRadius: '1.5rem',
    windowBar: 'transparent'
  }
})

• buttons:

Enable/Disable Action Buttons

Option Type Default Description
hyperlink Boolean false Enable/Disable code window hyperkink button, required window to have id=" "
copy Boolean false Enable / Disable Copy Code Button
position String window Set the position of the buttons, "left", "right" e "window"
color String #939da5 Sets the color of the icons
backgroundHover String #adbac74a Set hover background color

Examples: