증산동에 이런 카페가? 디저트 카페 펀스터

작성자:
 벚꽃이 피던 금요일 오전 친구들과 증산동 빵 맛집으로 브런치하러~~ ===== 오시는 길 ===== 버스 ---> 증산 초등학교 하차 후 뒷골목 지하철로 오시는 길 ---> 1. 증산역 3번 출구300m 직진 후 증산도서관 등지고 수색방향으로 200m 오른쪽에 빨간색 건물입니다. 2. 디지털 미디어 시티역 5번 출구로 나오셔서 자이아파트 쪽으로 300m 가량 직진 증산골프장 옆 빨간색 건물입니다. 들어오기 전에 외부 테이블도 있답니다. 안으로 들어오는 햇살이 너무 눈부셔 사진이 뿌옇게 나오네요 ㅎㅎ 크로와상에 앙버터를 ㅎㅎ 맛있어 보여 사진만 찍음 소시지 페스츄리~~ 우리 아들 좋아하는건데.. 그 옆에는 남편이 좋아하는 애플파이 요 파이도 맛있다고 하네 집에 와 생각해보니 엄청 컷던 걸로 기억 담엔 사와야지 ㅋ 매콤한 명란 바게트에 감태를 올려 너무 파릇하죠? 매콤한 맛을 감태가 잘~~ 감아줄 듯 하네요. 깜빠뉴가 좀 작긴 한데 실해 보임 많이들 사가는 걸 보고 먹어볼 껄 후회 막심. 토마토 치아버터 vs 크리스피 치아버터 뭐가 맛있을까요?  글쎄요.. 둘 다 맛있겠죠. 2층올 올라가는 계단 옆이 화장실입니다. 근데 화장실 옆에서 빵이 나와요 ㅎㅎ 화장실 끼고 계단으로 올라가면 2층올 올라가면 로스팅 룸이 보이네요 커피가 맛난 이유가 여기 있었군요. 2층이 꽤 넓고 밝습니다. 햇살이 눈부시게 들어와서 창을 등지고  큰 원형 테이블에 자리 잡았습니다 벌집라떼 & 펀스터크림 & 아메리카노 단호박 깜빠뉴 & 잠봉 뵈르 & 쪽파크림치즈 베이첼(베이글+프레첼) 부드러운 크림과 찐한 커피가 잘 어울리는 펀스터 크림, 풍미가 좋아요 잠봉뵈르 바게크가 좀 딱딱하니 힘 주고 깨물어 주세요! 잠봉 듬뿍, 버터는 고소하니 담백함에 홀딱 캬~ 쪽파가 쫑쫑쫑, 크림치즈도 듬뿍이네요 베이글모양의 프레첼입니다. 크림치즈의 느끼할 수 도 있는 맛을 쪽파가 향긋하게 잡아줘요 주차는 카페앞 3대까지 가능하다고 하니 참고하세요....
댓글 쓰기

구글 블로거(Blogger)에서 syntax highlight(코드 문법 강조) 적용하기

작성자:

블로거(Blogger)는 구글에서 운영하는 블로그입니다. 이름은 블로거지만 도메인이 블러그스팟이라  블로그스팟이라고 많이 들 부릅니다.

블러거를 사용해 보시면 글을 작성할 때 아쉬운 기능이 몇 가지 있습니다. 그중에서 가장 아쉬운 기능은 제공하는 에디터에서 프로그래밍 언어를 작성할 때 코드를 입력하는 메뉴가 없다는 것 이였습니다. 프로그래밍 소스는 코드에 따라 알록 달록 색깔이 바뀌어야 제 맛인데 말이죠.

알아보니 몸으로 때워서 syntax highlight(코드 문법 강조)를 적용하는 방법이 몇 가지 있더군요.그 중에서 기능도 막강하고 적용하기도 쉬운 highlight.js를 사용하는 방법을 알아보겠습니다.


1. highlight.js 코드 가져오기

highlight.js 는 구문 번호는 제공하지 않습니다. 구문 번호가 필요하다면 다른 방법을 알아 보셔야 합니다. 하지만 기능은 막강합니다. 그 이유는 조금 있다 알게 되십니다. 다음의 링크로 이동합니다.

https://highlightjs.org/

링크를 쭉 내리시면 아래 그림과 같이 첫 번째 cdnjs 탭이 보이실 겁니다. 

거기에 보이는 다섯 줄의 코드를  복사합니다. 제가 복사해 왔으니 지금은 아래 코드를 사용하셔도 됩니다. 가장 최근 버전입니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"></link>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>

제가 복사해 온 코드는 <link> 태그 끝에 </link> 태그로 막아줘서 에러가 안 나는데 직접 코드를 복사해 오셨다면  <link> 태그 끝에 </link> 태그 막는 부분이 없습니다. 꼭 </link> 이 부분 넣어 주세요.

2. 나의 Blogger에 적용하기

블로거에 로그인 후 테마를 클릭합니다. 테마를 클릭하고 우측을 보시면 아래 그림과 같이 맞춤 설정 버튼이 보입니다.






버튼을 클릭하면 메뉴가 열리는 데 거기에서 HTML 편집 메뉴를 클릭하시고 html 페이지를 엽니다.

아래 복사해 온 코드를 </head> 바로 위에 붙여 넣습니다. </head> 코드를 찾기 어려우시면 라인 번호가 있는 곳에 보면 <head>와 <body> 등을 접을 수 있는 기능이 있는데 이 기능을 사용하시면 </head>를 쉽게 찾을 수 있습니다

복사해온 코드를 </head> 위에 붙여 넣으셨나요? 이제 저장만 해 주면 끝입니다


사용법: <pre><code>프로그래밍 코드</code></pre>


사용법은 위와 같이 <pre><code>태그로 감싸 주시면 됩니다. 반드시 명심해야 할 것은 HTML 모드에서 작성해야 syntax highlight가 적용된다는 것입니다. 아래 그림에 있는 HTML 보기 버튼을 클릭해야 HTML 모드로 작성하실 수 있습니다.






가장 기초적인 자바 소스로 syntax highlight가 잘 적용 되었는지 확인 해 보겠습니다. 아래는 적용 화면입니다.


적용은 잘 되었는데 화면이 너무 밋밋합니다. 우리가 복사해 넣은 코드 중에 첫 번째 링크 태그 안에 있는 href 속성을 확인해 보십시오. 다음의 url이 보이실 겁니다. 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css

default.min.css 로 되어 있습니다. default.min.css 대신에 아래 링크로 들어가서 아무 css나 골라 옵니다.

github.com

저는 stackoverflow-dark.css를 선택해서 아래와 같이 교체했습니다. default.min.css만 지우고 stackoverflow-dark.css라 적어 주시면 됩니다. 아래와 같이 말이죠.

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/stackoverflow-dark.css

stackoverflow-dark.css를 적용 후의 syntax highlight입니다.

이제 좀 마음에 드네요. 마음에 안들면 마음에 드는 syntax highlight로 css를 교체하시면됩니다. 이 점이 highlight.js 의 강력함 입니다.

PS : 다른 코드는 문제가 없는데 html 코드를 삽입 할 때는 <> 이 태그들이 문제가 되어서 정상 작동을 안 합니다. 꼭 html 태그를 치환해서 사용해야 합니다

https://accessify.com/ 여기가 html 태그를 치환할 수 있는 사이트인데 치환할 수 있는 페이지에 쉽게 가시라고 아래 링크 걸어 둡니다.

https://accessify.com

댓글

댓글 쓰기