코드블럭 하일라이트(syntaxhighlight) 플러그인 정보
코드블럭 하일라이트(syntaxhighlight) 플러그인
관련링크
첨부파일
본문
1. 코드블럭 하일라이팅 syntaxhighlight 기능을 다른 방식으로 표현해 보았습니다.
넘버링 함수를 만들었고 결과확인창이 붙어 있습니다.^^
아미나도 완벽하게 가능합니다만 원하는 css 가 안 나오네요. 그래도 그럭저럭...
첨부압축파일의 압축을 풀어 code 폴더를 plugin 디렉토리에 통으로 업로드 합니다.
----------
2. 그래서 기본주소는 아래의 형태가 되겠지요.
http://wittazzurri.phps.kr/plugin/code/
가장 먼저 html+css+js 코드는 txt 로 작성한 후 code-code 디렉토리로 업로드 합니다.
head 와 body 는 굳이 기입하지 않아도 됩니다.
텍스트 파일은 반드시 이 디렉토리에 넣어주어야 합니다.
아래처럼 파일주소가 나옵니다.
http://wittazzurri.phps.kr/plugin/code/code/1.txt
http://wittazzurri.phps.kr/plugin/code/code/2.txt
http://wittazzurri.phps.kr/plugin/code/code/3.txt
----------
3. 겟변수를 주기 시작합니다. txt파일에서 마지막 확장자를 빼고 문자만 입력합니다.
예를 들어서 my.txt 라고 한다면 my 만 입력합니다. 아래처럼 됩니다.
http://wittazzurri.phps.kr/plugin/code/?code=1
http://wittazzurri.phps.kr/plugin/code/?code=2
http://wittazzurri.phps.kr/plugin/code/?code=3
----------
4. 넘버링을 사용하기 싫으면 겟변수로 num=no 를 주고 php 코드인 경우 뷰어의 의미가 없으므로 결과보기 버튼이 플요없으면 view=no 를 줍니다.
http://wittazzurri.phps.kr/plugin/code/?code=2&num=no&view=no
----------
5. 제가 만든 겟변수는 모두 5개가 있습니다.
code=파일명
num=no // no 는 넘버링 미사용, 겟변수를 삭제하면 넘버링 사용
line=30 // ling-height 스타일입니다. 겟변수를 사용하지 않으면 디폴트값으로 22 가 들어갑니다.
view=no // no 를 주면 결과보기 버튼이 없어지고 겟변수를 사용하지 않으면 결과보기 버튼이 생겨납니다.
color=900000 // 바탕배경 색상코드를 # 없이 입력합니다. 디폴트값은 000000 이고 16진수로 기입합니다.
----------
6. config 디렉토리 안에는 js 파일과 버튼이미지가 있습니다.
원하는 이미지와 음원으로 사이즈를 맞춰 바꾸고 싶으면 바꾸세요.
또한 파비콘 ico 파일도 본인이 원하는 것으로 바꾸세요.
----------
7. 각 버튼의 기능은 클릭해 보면 알 것입니다. 기타 css 는 따로 파일을 만들지 않고 index.php 에서 정의해 주었습니다.
제가 텍스트파일을 땡기는 방식은 바닐라 아작스로 땡겼는데 php 에서 텍스트파일이 존재하는지 먼저 확인하는 과정을 거쳤기 때문에 따로 에러 처리를 하지 않앗습니다.
그래도 꼭 아작스에서 에러 처리를 해야겠다는 분은 제이쿼리 아작스와는 형태가 많이 다르므로...
index.php 에서
codeAjax.onload = () => {
어쩌구저쩌구;
}
이 아래에 에러구문을 아래처럼 입력해 주세요.
codeAjax.onerror = () => {
어쩌구저쩌구;
}
----------
----------
----------
8. 마지막으로 그누 게시글에서 사용하는 방법입니다.
1) 링크로 걸어줍니다.
2) 에디터에서 html 모드로 전환하여 아이프레임 태그로 걸어주면 자동으로 알아서 높이가 조절되면서 원하는 형태가 나올 것입니다. 아이프레임으로 걸 때는 딴 것 다 필요없고 src 만 입력하면 아이프레임 페이지에서 상위 페이지의 사이즈를 핸들링하는 코드가 삽입되어 있기 때문에 불편이 없을 것입니다.
<iframe src="페이지주소"></iframe>
단 아작스의 기본속성상 크로스도메인 문제로 아이프레임은 동일 사이트에서만 부를 수 잇고 타도메인은 이렇게 처리할 수 없으니 타도메인의 경우는 링크로 처리하세요.
----------
9. 반응형으로 만들었습니다.
또한 그누순정 기준이며 다른 빌더나 테마 등은 질문받지도 않고 테스트해 볼 생각도 없습니다.^^
6
댓글 전체
고생하셨네요.
돌아다니는 js파일을 보니 제가 생각하는 형태가 아니어서 코드를 한 3개정도 만들어 보았는데 이 방식이 가장 깔끔하더라구요.
일종의 코드펜인데 결과보기 모달창을 원래페이지만 있을 때는 원래페이지에, 아이프레임일 때는 상위페이지에 띄우는 코드를 구분하는 연산을 만드느라 시간이 좀 걸렸네요.
알고나면 쉬웠는데 시행착오 시간이...
본인이 학습하거나 만든 코드를 하나의 디렉토리 안에 넣어두면 찾기도 편하고 등등...
나중에는 코드만 모아둔 디렉토리의 리스트페이지를 열람하는 걸 생각중에 있습니다.
목록을 딱 클릭하면 바로 열리게요.
js 로 페이징코드를 짜 둔 것도 있어서 써먹을겸 겸사 겸사요.
늘 추천과 댓글 주셔서 감사요.
공개해 주셔서 감사합니다. ^^
기존의 https://sir.kr/g5_plugin/9655?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC&page=2을 계속 사용했는데요.
넘버링이 되고, 배경색을 그때 그때 바꿀수 있어서 좋습니다.
html, css, javascript 등 강좌 게시판을 만들때 결과를 바로 확인할 수있어서 더 좋습니다.
웹개발 강좌게시판 등을 만들때 매우 유용하게 사용할 수있을 것같습니다.
다시 한번 감사드립니다.
index.php 72행의 border-spacing ; 2px ; 74행의 border-spacing ; 1px ;은 세미콜론을 콜론으로 바꾸어야 되는 오타인 것 같습니다.
스타일을 주지 않으면 보더스페이싱은 2픽셀이 디폴트값이라 그게 그것처럼 보였겠네요.ㅋ
참고로 링크된 것은 결과보기가 없고 다른 에디터를 사용할 경우 또 코드를 새로 짜야 하는지라...
그리고 이 플러그인은 본인이 사용한 코드 엑기스만 txt 로 저장할 수 있는 형태인데다 링크주소는 다른 게시글에도 작용될 수 있어서 더 효과가 좋을 거에요.
<iframe src="페이지주소"></iframe>
페이지 주소는 어떤 주소를 넣어야 하는걸까요? ㅜㅜ
그리고 어느 파일어 넣어야 할까요?
