Syntax

A FRAMER COMPONENT

BLITZ

TOKYO NIGHT

NIGHT OWL

rose pine

@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px Helvetica, sans-serif;
}

@media print {
  a[href^="http"]::after {
    content: attr(href);
  }
}

@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px Helvetica, sans-serif;
}

@media print {
  a[href^="http"]::after {
    content: attr(href);
  }
}

WHAT IS THIS

THIS IS A COMPONENT FOR FRAMER, MADE BY BENJAMIN & ADAM, THAT ALLOWS YOU TO ADD CODE SNIPPETS TO YOUR SITES. IT USES HIGHLIGHT.JS, SUPPORTS AUTO-SIZING, AND CAN BE CUSTOMIZED. IT CAN BE USED TO CREATE NICE CODE SCREENSHOTS, TO SHARE MINI SITES WITH CODE THAT CAN BE COPIED, AND FOR YOUR LANDING PAGES. AND YES, SUPPORT FOR CODE BLOCKS WITHIN THE FRAMER CMS IS COMING SOON.

THIS IS A COMPONENT FOR FRAMER, MADE BY BENJAMIN & ADAM, THAT ALLOWS YOU TO ADD CODE SNIPPETS TO YOUR SITE. IT USES HIGHLIGHT.JS, SUPPORTS AUTO-SIZING, AND CAN BE CUSTOMIZED. IT CAN BE USED TO CREATE NICE CODE SCREENSHOTS, TO SHARE MINI SITES WITH CODE THAT CAN BE COPIED, AND FOR YOUR LANDING PAGES. AND YES, SUPPORT FOR CODE BLOCKS WITHIN THE FRAMER CMS IS COMING SOON.

<!DOCTYPE html>
<title>Title</title>

<script type="application/javascript">
  function $init() { return true; }
</script>

<style>
  body { background: url(bg.jpg); }
</style>

/* Swift */
import Foundation

@objc class Person: Entity {
  var name: String!
  var age:  Int!

  init(name: String, age: Int) {
    /* /* ... */ */
  }
}

/* JSON */
[
  {
    "title": "apples",
    "count": [12000, 20000]
  },
  {
    "title": "oranges",
    "count": [17500, null]
  }
]

WORKING WITH WEBFONTS

TO USE custom FONTS AND GOOGLE WEB FONTS, SIMPLY ADD A TEXT LAYER TO YOUR WEBSITE AND USE THE font SELECTOR TO PICK YOUR TYPEFACE. IF YOU ARE NOT USING IT ELSEWHERE, YOU CAN HIDE IT WITH THE "visible" PROPERTY. NOW, YOU CAN REFERENCE THIS TYPEFACE BY NAME within THE "TYPEFACE" PROPERTY. YOU CAN ALSO FIND THIS IN THE DEMO BELOW.

/* This Typeface */
JetBrains Mono

OPTIMIZED FOR FRAMER & MOTION

WHEN SETTING LANGUAGE TO JSX, WE USE PRISM.JS INSTEAD. THIS GIVES YOU A CUSTOM VERSION OF THE BLITZ THEME: ONE THAT IS OPTIMIZED FOR FRAMER AND FRAMER MOTION SNIPPETS. IT ALSO INCLUDES two other PRISM THEMES FOR JSX CODE.

import type { ComponentType } from "react"

export function setRotate(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: 360 }}
                transition={{ duration: 1, ease: "linear" }}
            />
        )
    }
}

REQUEST A THEME

IF YOUR FAVOURITE HIGHLIGHT THEME IS MISSING, FEEL FREE TO REQUEST A THEME. YOU CAN FIND ME (BENJAMIN) hanging out in the framer DISCORD COMMUNITY. LET’S CHAT THERE! THE COMPONENT CURRENTLY includes 7 THEMES, including one custom theme that is only available here in framer.

TLDR; DEMO?

yeppers. THERE IS A REMIX LINK HERE THAT HAS ALL OF THESE THINGS SET-UP SO YOU CAN KIND OF JUST PLAY AROUND AND LOOK AT HOW THIS IS TIED TOGETHER. You CAN USE IT TO SHARE CODE SNIPPETS AROUND, IF YOU’D LIKE. happy tinkerin’

DEMO PROJECT

Copy Component