STUDY BITS STUDY BITS

컴퓨터/HTML & JS & TS

• 티스토리 highlight JS 코드 복사 플러그인

  컴퓨터/HTML & JS & TS 2020. 7. 23. 14:48

  highlight JS Badge https://github.com/RickStrahl/highlightjs-badge RickStrahl/highlightjs-badge Addon component to highlightjs that lets you copy code snippets to the clipboard and displays the active syntax - RickStrahl/highlightjs-badge github.com 소개 : @RcikStrahl라는 분의 highlight JS badge를 티스토리에 적용하는 방법을 소개하겠습니다. 우선 아래 처럼, 코드 우측 상단에 배지가 생기고, 클릭하면 코드가 복사되는 플러그인입니다. 클래스 안에 codebadge를 추가하고, clicke..

  Read More
• 티스토리 Fira Code 폰트 적용하기

  컴퓨터/HTML & JS & TS 2020. 5. 11. 23:02

  https://github.com/tonsky/FiraCode tonsky/FiraCode Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub. github.com 사이에 Fira Code를 적용시킨다. style 부분에 code.hljs는 테마마다 다를 수 있으니 클래스를 잘 찾아서 입력한다. (F12를 눌러 개발자 도구 열기) func main() { ch := make(chan int) ch

  Read More
• Electron 시작 설정 및 패키징 튜토리얼

  컴퓨터/HTML & JS & TS 2018. 5. 25. 13:31

  Electron 2020-07-28 : Electron 2.0.2 -> 9.1.1 업데이트 ※ Electron, Git 설치 필요 Electron 공식 사이트: https://electronjs.org/ 1. electron 설치 npm i -D electron@latest 위 명령어를 실행해 electron을 설치하고, Electron 개발할 폴더를 만든다. 2. MINGW64 (mingw-64: http://mingw-w64.org/doku.php/download) (GIT : https://git-scm.com/) 위 두개를 설치한 후, 그 폴더를 마우스 우클릭하여 "Git Bash Here"을 클릭한다. 3. Electron 시작 npm init 위 커맨드를 입력하고 package name, ve..

  Read More
• Javscript Array 복사(copy)

  컴퓨터/HTML & JS & TS 2018. 5. 23. 18:54

  AirBnB ESLint(자바스크립트 표준)에 따르면 (https://github.com/airbnb/javascript#es6-array-spreads) const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i]; } 위는 Bad 코드이며 아래처럼 '...' (spread) 오퍼레이터를 사용하라고 권장한다. const items = [1, 2, 3, 4, 5]; const itemsCopy = [...items];

  Read More
• 티스토리 글 사진, 글씨 애니메이션 효과 넣기 (AOS)

  컴퓨터/HTML & JS & TS 2018. 2. 21. 16:53

  (공식 로고) AOS (Animate on Scroll) └스크롤 시 HTML 요소들에 간단히 애니메이션(페이드인, 페이드아웃 등) 효과를 추가할 수 있게 해주는 라이브러리. └제작자: michalsnik └효과 체험 하기: https://michalsnik.github.io/aos/ └기본 작동: HTML element에 data-aos attribute="애니메이션 이름" 을 추가 1. 사용 설정하기 위 두 파일을 '파일업로드'에서 업로드하고, HTML 사이에 아래 코드를 추가한다. 그리고 바로 위에 아래 코드 추가, init 만 추가하고 일일이 애니메이션 따로 설정 가능 fixed: 썸네일 이미지 분리 썸네일을 따로 하고 싶은 분들은 댓글 2. 애니메이션 아래 목록을 참고하여 "애니메이션이름"을 바..

  Read More
• 티스토리 기본 반응형 스킨 #1 간단 수정

  컴퓨터/HTML & JS & TS 2018. 2. 20. 20:58

  skin.html = index.html2019/03/21티스토리 기본 스킨(아래)를 수정한 버전 ↓ ▶ 수정 사항 로그인 & 로그아웃 버튼 툴 팁항상 맨 위로 가기 버튼 (opacity0.8, 맨 위 0) 다운로드 버튼 수정 카테고리 메인분류 bold 처리스크롤바 flat KATEX(수학 기호), highlight.js(Syntax 하이라이터), AOS(zoom-in) 내장 KATEX 사용법: $$ 식 $$highlight.js 사용법: JAVA툴팁 사용법 (HTML 편집 클릭 후 속성 추가): data-tooltip="메시지", data-tooltip-location="left,right,top,bottom 중 하나" 썸네일 이미지: 250 x 250 px (display: none)zindex: 9..

  Read More
• 소스 하이라이터 (syntaxhighlighter, highlight.js)

  컴퓨터/HTML & JS & TS 2018. 2. 19. 02:14

  syntaxhighlighter를 사용해 왔지만 스킨을 바꾸면서 더 괜찮아 보이는 라이브러리를 찾았다. prism.js도 괜찮아 보인다. highlight.js 사이트└syntaxhighlighter, primsjs 와 같이 컴퓨터 언어 하이라이터└제작자: isagalaev└효과 체험 하기: https://michalsnik.github.io/aos/└176개의 언어 지원과 79가지의 스타일 + 자동 언어 탐지└기본 작동: 와 안 프로그래밍 언어를 하이라이팅 사이트에 들어가 일단 체험하세요. ▷ 설치 방법 1. 간단히 사이에 아래를 추가하면 끝이다. ▷ 사용법 syntaxhighlighter 과 비슷하다. // C Coded 예제) public static void main(String[] args) {..

  Read More
• 자바스크립트로 간단한 신경망(Neural Network) 만들기 Synaptic.js

  컴퓨터/HTML & JS & TS 2017. 8. 26. 21:36

  Medium freecodecamp의 Per Harald Borgen의 글을 바탕으로 합니다. (링크: How to create a Neural Network in JavaScript in only 30 lines of code) ※ 필요한 것 (클릭 시 링크) Synaptic.js (The javascript architecture-free neural network library for node.js and the browser) Node.js 자바스크립트로 만들어 볼 간단한 신경망은 XOR 식을 푸는 신경망입니다. 예를 들어, (0, 1), (1,0) 을 입력하면 1, 나머지 (0, 0), (1, 1)을 입력하면 0 먼저, 아래 그림은 시그모이드(sigmoid) 뉴런을 표현합니다. (앞으로 만들 네..

  Read More